ext tree有关知识 _Web前端

ext tree相关知识

ext tree 动态修改各个节点名称icon小图标

"afterchildrenrendered":function(){
        tree.getRootNode().eachChild(function(_node){
                _node.setText("1111");//设置节点的文字
                _node.getUI().getIconEl().src = "http://localhost:8080/web/images/icons/treeNodeLeafIcon.png";//设置icon小图标
        });
}

ext tree 动态修改节点样式

function updateTreeNodeIcon(treeNode,oldIconCls,newIconCls){
      if(!treeNode)
           return;
      var imgHtmlEl = treeNode.getUI().getIconEl(); 
      treeNode.iconCls = newIconCls;
      Ext.Element.fly(imgHtmlEl).removeClass(oldIconCls);
      Ext.Element.fly(imgHtmlEl).addClass(newIconCls);
}

Ext 中的Tree实现不同节点不同的右键菜单

转自：http://kingapex.iteye.com/blog/150806

首先了解 Ext.Tree.Node.attributes的用法：

定义如下数据（其中有自定义类型type）：

js 代码

[{"text":"a","id":"1","cls":"folder","type":"4"},{"text":"b","id":"2","cls":"folder","type":"3"}]

通过 Tree.TreeLoader　加载数据后可以通过如下语法读取type自定义属性

js 代码

node.attributes.type

了解自定义属性用法后可在Tree的contextmenu事件中控制不同类型的结点显示不同的菜单了，关键代码：

js 代码

prepareCtx:function(node, e){    
        node.select();    
        if(node.attributes.type=="3");{    
       ctxMenu.showAt(e.getXY());    
        }    
       if(node.attributes.type=="4"){    
         ctxMenu1.showAt(e.getXY());    
       }    
      }

完整例子见附件，注：此例子不中包含ext库文件，如需运行需将ext库文件放入ajax/yui目录