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

问题

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.

回答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:

in css file:

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

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

回答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"
      }]

来源：https://stackoverflow.com/questions/23261919/is-there-any-way-to-disable-nodes-of-treeview-in-extjs-4

标签

extjs4

treeview