有没有办法禁用ExtJS 4中的treeview节点 [英] Is there any way to disable nodes of treeview in ExtJS 4

问题描述

我的目的是禁用西部地区树形视图的某些节点.

下面的代码片段显示了它:

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

为什么禁用和隐藏属性在ExtJS 4中不起作用.

是否有任何插件可以实现它.

解决方案

树面板中的节点是Ext.data.NodeInterface对象.

它没有禁用或隐藏的属性，但是它具有cls，您可以向其添加display: none样式以隐藏节点.<​​/p>

示例:

CSS文件中的

1. :

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

2. 在extjs代码中:

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

对于禁用的功能，可以使用treepanel的beforeitemclick事件，在其中可以手动读取禁用的属性.

示例:

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

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:

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

这篇关于有没有办法禁用ExtJS 4中的treeview节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！