有没有办法在ExtJS 4中禁用treeview的节点

Question

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

以下代码段显示：

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

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

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

Answer 1

树形图中的节点是Ext.data.NodeInterface个对象。

它没有已禁用或隐藏的属性，但它具有cls，您可以为其添加隐藏节点的display: none样式。

示例：

在css文件中

1. ：

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

在extjs代码中

2. ：

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

Answer 2

如果treeview的子项不是复选框，则上述代码可以正常工作。如果树视图的子项是复选框，那么在这种情况下，我们需要删除xtype of children元素作为复选框以使其工作。以下是儿童样本。

function renderHtml($sce,string) {
    return $sce.trustAsHtml(string);
}