自定义ExtJs Tree Grid面板

Question

I am using ExtJs 4.1 and want to utilize ExtJs-TreeGrid . Please look at the example of the grid here

I want to add following feature to this grid:

1. Ability to disable certain check box.
2. Ability to hide the check box when node is not leaf node (check the attached image for more understanding)

Answer 1

See my answer here .

To disable certain checkboxes you will need to slightly change the the renderer / processEvent methods. Since I don't know which checkboxes you want to disable, I'll just use a dummy function where you will need to provide your condition:

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

Also note that by default this.disabledCls is x-item-disabled and will not provide any visible change to your column. For example, if you wanted to change the opacity of a disabled checkbox, you will need to provide your own disabledCls

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

and use some CSS:

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