I want to hide checkboxes on non-leaf nodes in a treegrid (treepanel with columns)

Question

In an Ext JS app I have a tree panel with a checkbox column (xtype: 'checkcolumn'). But I only want to display the checkbox on the leaf nodes. In the parent nodes I want to hide the checkboxes (or at least disable them).

How can I achieve this?

Answer 1

It's not supported by default, but you could provide your own column class which extends Ext.grid.column.CheckColumn:

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

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

    renderer : function(value, meta, record) {
        if (record.isLeaf()) {
            return this.callParent(arguments);
        }
        return '';
    }
});

And use that in your tree panel:

columns: [{
    xtype: 'treecolumn'
},{
    xtype: 'mytreecheckcolumn',
    dataIndex: 'active'
}]