Question

在Ext JS应用程序中，我有一个带有复选框列的树面板（xtype：'checkcolumn'）。但我只想在叶节点上显示复选框。在父节点中，我想隐藏复选框（或者至少禁用它们）。

我怎样才能做到这一点？

Answer 1

基于matt的答案，使用renderer方法可以更轻松地实现这一点，ala：

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
   if (!record.isLeaf()) {
      metaData.style = "display: none;";
   }
}

Answer 2

上述方法对我没有用。我正在使用ExtJS 5.01。上述解决方案产生了一些XTemplate错误。所以我使用了以下内容：

Ext.define('MyApp.view.LeafOnlyCheckColumn', {
extend: 'Ext.grid.column.CheckColumn',
alias: 'widget.leafOnlyCheckColumn',

processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
    if (record.isLeaf()) {
        return this.callParent(arguments);
    }
    else {
        return MyApp.view.LeafOnlyCheckColumn.superclass.superclass.processEvent.apply(this, arguments);
    }
},

defaultRenderer: function(value, cellValues){
    if(cellValues.record.isLeaf()){
        return this.callParent(arguments);
    }else{
        var cssPrefix = Ext.baseCSSPrefix,
        cls = cssPrefix + 'grid-checkcolumn';
        cellValues.tdCls += ' hiddenCheckCls';
        return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
    }
}
});

然后我添加了以下css：

.hiddenCheckCls{
    visibility: hidden;
}

并使用带有xtype的类：leafOnlyCheckColumn

希望有所帮助！

Answer 3

默认情况下不支持此功能，但您可以提供自己的扩展Ext.grid.column.CheckColumn的列类：

Ext.define('My.tree.column.CheckColumn', {
    extend: 'Ext.grid.column.CheckColumn',
    alias: 'widget.mytreecheckcolumn',

    processEvent: function(type, view, cell, recordIndex, cellIndex, e, record, row) {
        if (record.isLeaf()) {
            return this.callParent(arguments);
        }
        else {
            return My.tree.column.CheckColumn.superclass.superclass.processEvent.apply(this, arguments);
        }
    },

    renderer : function(value, meta, record) {
        if (record.isLeaf()) {
            return this.callParent(arguments);
        }
        return '';
    }
});

在树状图中使用它：

columns: [{
    xtype: 'treecolumn'
},{
    xtype: 'mytreecheckcolumn',
    dataIndex: 'active'
}]

Answer 4

此模型字段规范也可以帮助您：

Ext.define("ExampleModel",{
  extend: "Ext.data.Model",
  fields: [{
    name: 'checked',
    type: 'boolean', 
    convert: function(v,rec) {
      return !rec.isLeaf() ? null : rec.data.checked; 
    }
  }]        
});

Answer 5

简单的解决方案是使用2种不同的型号。一个用于没有名为＆＃39;的字段的父节点检查＆＃39;在它。

Ext.define('App.model.Parent', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'title'
    }]
});

一个用于具有名为＆＃39;已检查＆＃39;。

的字段的子节点

Ext.define('App.model.Child', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'checked',
        type: 'boolean'
    },{
        name: 'title'
    }]
});

然后在树中只有经过“检查”的节点。其中的字段将显示复选框。

我想隐藏treegrid中的非叶子节点上的复选框（带有列的treepanel）

5 个答案: