定制ExtJs树网格面板

Question

我正在使用ExtJs 4.1并希望利用ExtJs-TreeGrid。 请看电网here

我想下面的功能添加到该网格的例子：

1. 能够禁用某些复选框。
2. 能够隐藏复选框，当节点不是叶节点（检查连接的图像更多的了解）

Answer 1

见我的回答here。

要禁用某些复选框，您需要稍微更改渲染器/ processEvent方法。因为我不知道你想禁用的检查框，我就用一个虚拟的空间，您需要提供您的条件：

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

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

    renderer : function(value, meta, record) { 
     if (record.isLeaf()) { 
      if (record.get('disabled')) { 
       meta.tdCls += ' ' + this.disabledCls; 
      } 
      return this.callParent([value, meta]); 
     } 
     return ''; 
    } 
}); 

还要注意，在默认情况下this.disabledCls是x-item-disabled，不会提供任何可见的变化到你的专栏。例如，如果你想改变一个残疾人复选框的不透明度，您将需要提供自己的disabledCls

{ 
    xtype: 'mytreecheckcolumn', 
    dataIndex: 'active', 
    disabledCls: 'x-grid-cell-checkcolumn-disabled' 
} 

，并使用一些CSS：

.x-grid-cell-checkcolumn-disabled { 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); 
    opacity: 0.3; 
}