我正在使用 ExtJs 4.1 并想使用ExtJs-TreeGrid。请看这里的网格示例
我想在此网格中添加以下功能:
- 能够禁用某些复选框。
- 能够在节点不是叶节点时隐藏复选框(查看附图以获得更多理解)
我正在使用 ExtJs 4.1 并想使用ExtJs-TreeGrid。请看这里的网格示例
我想在此网格中添加以下功能:
在这里查看我的答案。
要禁用某些复选框,您需要稍微更改 renderer / 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;
}