Customizing ExtJs Tree Grid panel

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:

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

enter image description here

matt matt · Accepted Answer · 2013-10-29T09:06:58

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

Customizing ExtJs Tree Grid panel

1 Answers