Is there any way to disable nodes of treeview in ExtJS 4

Question

My purpose is to disable certain nodes of treeview in the west region.

The below snippet shows it:

root: {
expanded: true,       
id: 'treeview1',
    children: [
               {"text": "Make Copy", 
                "leaf": true, 
                id:'HS1', 
                "**disabled**": true,
                "**hidden**" : true}
              ]
}

Why does the disabled and hidden property doesn't work in ExtJS 4.

Is there any plugin to achieve it.

Answer 1

The nodes in the treepanels are Ext.data.NodeInterface objects.

It doesn't have disabled or hidden properties, but it has cls and with that you can add a display: none style to it which is hiding the node.

Example:

1. in css file:

   .x-hidden-node {display: none !important;}

2. in extjs code:

   root: {
       expanded: true,
       id: 'treeview1',
       children: [{
           text: 'Make Copy', 
           leaf: true, 
           id:'HS1',
           cls : 'x-hidden-node'
       }]
   }

For the disabled functionality, you can use the treepanel's beforeitemclick event in which you can manually read the disabled property.

Example:

Ext.create('Ext.tree.Panel', {
    (...)
    listeners: {
        beforeitemclick: function(treeview, record, item, index, e, eOpts) {
            if (record.raw && record.raw.disabled == true) {                
                return false;
            }
            return true;
        },
        itemclick: function(treeview, record, item, index, e, eOpts) {
            console.log(record, item);
        }
    }
});

Answer 2

The above codes work properly if children of treeview is not a checkbox. If children of a treeview is checkbox then in that case we need to remove xtype of children element as checkbox to make it work. Below is the sample of children.

children: [{
        "xtype": "checkbox",// remove
        "checked":"false", //remove
        "expanded": "false",
        "leaf": "true",
        "qtip": "Make Copy",
        "text": "Make Copy",
        "disabled": "true",
        "cls" : "x-hidden-node"
      }]