Ext3 备忘

●给Ext.ux.tree.TreeGrid添加checkbox
    TreePanel要添加checkbox很容易，只需节点有checked属性。TreeGrid默认不支持，为此上网找资料半天才发现简单一点的方法，如下：
    修改Ext.ux.tree.TreeGridNodeUI的方法renderElements，在buf数组中，在含有x-tree-node-icon的行下面添加一行：
Ext.isBoolean(a.checked) ? ('<input class="x-tree-node-cb" type="checkbox"' + (a.checked ? ' checked' : '') + '/>') : '',
    还要在renderElements方法的最后添加以下几行：
if (Ext.isBoolean(a.checked)){
  this.checkbox = cs[3];
  this.checkbox.defaultChecked = this.checkbox.checked; //fix for ie6
  this.anchor = cs[4];
  this.textNode=cs[4].firstChild;
}

●让带checkbox的TreeGrid具有与GridPanel一样的点击选中行为：
listener:{
    click: function(n){
        n.getUI().toggleCheck(); 
        return n.getUI().isChecked();
    },
    checkchange: function(n, checked){
        checked ? n.select() : n.unselect();
    }
}

●Combox默认提交text，要提交value，需设置hiddenName属性为字段名，取消name属性。

●手动创建grid的行
  var Record = Ext.data.Record.create([{name:'id'},{name:'title'}]);
  var r = new Record({id:1,title:'text'});
  grid.store.add(r);
  注意，这样创建的Record，取数据的方法为record.data，不是record.json

●实现combo模糊查询
combo.on('beforequery', funciton(qe){
  var cb = qe.combo;
  cb.selectedIndex = -1;
  if (qe.foreAll) return;
  cb.store.filterBy(function(r, id){
    var text = r.get(cb.displayField);
    return text.indexOf(qe.query) != -1;
  });
  cb.onLoad();
  return false;
});

●实现combo自定义显示值
var store = new Ext.data.JsonStore({
  url: 'xxx',
  fields:['id','name','text',
    {name:'display', convert:function(v,r){return r.name + '(' + r.text + ')';}}]
});
combo:
{
  xtype: 'combo', triggerAction:'all', store:store,valueField:'id',
  displayField:'display', selectOnFocus:true
}

评论

6 楼 zxlaiye 2012-02-03  

zzz331244869 写道

我的treegrid数据来源于json文件，我为每个节点都添加了checked属性，但是没反应啊？怎么回事？

应该是什么地方搞错了吧，建议：
1、先在TreePanel中实现checkbox，再修改成TreeGrid的实现；
2、或者在Ext.ux.tree.TreeGrid的源码插件一些语句，用firebug查看renderElements方法中某些变量值，以确保数据格式是否正确；
3、或者将你的json文件，修改过的Ext.ux.tree.TreeGrid中的renderElements方法的源码和创建TreeGrid时的代码一起发出来看一下。

5 楼 zzz331244869 2012-02-03  

我的treegrid数据来源于json文件，我为每个节点都添加了checked属性，但是没反应啊？怎么回事？

4 楼 zxlaiye 2012-02-02  

zzz331244869 写道

奥，我那个没有Treepanel。直接用的treegrid，treegrid好行没有checked属性，那怎么办啊？

treegrid和treepanel的节点数据结构是类似的，也有checked属性，试一下就知道了。

3 楼 zzz331244869 2012-02-02  

奥，我那个没有Treepanel。直接用的treegrid，treegrid好行没有checked属性，那怎么办啊？

2 楼 zxlaiye 2012-02-02  

zzz331244869 写道

●给Ext.ux.tree.TreeGrid添加checkbox
    TreePanel要添加checkbox很容易，只需节点有checked属性。TreeGrid默认不支持，为此上网找资料半天才发现简单一点的方法，如下：
    修改Ext.ux.tree.TreeGridNodeUI的方法renderElements，在buf数组中，在含有x-tree-node-icon的行下面添加一行：
Ext.isBoolean(a.checked) ? ('<input class="x-tree-node-cb" type="checkbox"' + (a.checked ? ' checked' : '') + '/>') : '',
    还要在renderElements方法的最后添加以下几行：
if (Ext.isBoolean(a.checked)){
  this.checkbox = cs[3];
  this.checkbox.defaultChecked = this.checkbox.checked; //fix for ie6
  this.anchor = cs[4];
  this.textNode=cs[4].firstChild;
}

这段添加进去怎么没有出现多选框呢？？[b][/b]

你传给树的数据是不是没有包含checked属性，checked属性值要么是true，要么是false，不能省略。

1 楼 zzz331244869 2012-02-01  

●给Ext.ux.tree.TreeGrid添加checkbox
    TreePanel要添加checkbox很容易，只需节点有checked属性。TreeGrid默认不支持，为此上网找资料半天才发现简单一点的方法，如下：
    修改Ext.ux.tree.TreeGridNodeUI的方法renderElements，在buf数组中，在含有x-tree-node-icon的行下面添加一行：
Ext.isBoolean(a.checked) ? ('<input class="x-tree-node-cb" type="checkbox"' + (a.checked ? ' checked' : '') + '/>') : '',
    还要在renderElements方法的最后添加以下几行：
if (Ext.isBoolean(a.checked)){
  this.checkbox = cs[3];
  this.checkbox.defaultChecked = this.checkbox.checked; //fix for ie6
  this.anchor = cs[4];
  this.textNode=cs[4].firstChild;
}

这段添加进去怎么没有出现多选框呢？？[b][/b]