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'
}]

Answer 2

Building on matt's answer, this can be more easily achieved using the renderer method, ala:

renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
   if (!record.isLeaf()) {
      metaData.style = "display: none;";
   }
}

Answer 3

The above methods didn't work for me. I am using ExtJS 5.01. The above solutions generated some XTemplate errors. So I used the following:

Ext.define('MyApp.view.LeafOnlyCheckColumn', {
extend: 'Ext.grid.column.CheckColumn',
alias: 'widget.leafOnlyCheckColumn',

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

defaultRenderer: function(value, cellValues){
    if(cellValues.record.isLeaf()){
        return this.callParent(arguments);
    }else{
        var cssPrefix = Ext.baseCSSPrefix,
        cls = cssPrefix + 'grid-checkcolumn';
        cellValues.tdCls += ' hiddenCheckCls';
        return '<img class="' + cls + '" src="' + Ext.BLANK_IMAGE_URL + '"/>';
    }
}
});

Then I added the following css:

.hiddenCheckCls{
    visibility: hidden;
}

And used the class with the xtype: leafOnlyCheckColumn

Hope that helps!

Answer 4

Also this model fields specification can help you:

Ext.define("ExampleModel",{
  extend: "Ext.data.Model",
  fields: [{
    name: 'checked',
    type: 'boolean', 
    convert: function(v,rec) {
      return !rec.isLeaf() ? null : rec.data.checked; 
    }
  }]        
});

Answer 5

Simple solution is to use 2 different models. One for your parent nodes that does not have a field named 'checked' in it.

Ext.define('App.model.Parent', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'title'
    }]
});

One for child nodes that does have a field named 'checked'.

Ext.define('App.model.Child', {
    extend: 'Ext.data.TreeModel',
    fields: [{
        name: 'checked',
        type: 'boolean'
    },{
        name: 'title'
    }]
});

Then in the tree only nodes with the 'checked' field in them will show checkboxes.