自定义ExtJs Tree Grid面板

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;
}