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

时间:2014-04-24 06:57:40

标签: extjs4 treeview

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

以下代码段显示:

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

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

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

2 个答案:

答案 0 :(得分:4)

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

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

示例:

    在css文件中
  1. .x-hidden-node {display: none !important;}

  2. 在extjs代码中
  3. root: {
        expanded: true,
        id: 'treeview1',
        children: [{
            text: 'Make Copy', 
            leaf: true, 
            id:'HS1',
            cls : 'x-hidden-node'
        }]
    }

  4. 对于已禁用的功能,您可以使用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);
            }
        }
    });

答案 1 :(得分:2)

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

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