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