ext tree相关知识 动态修改节点小图标

ext tree相关知识

Java代码 

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

[java] view plaincopy

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

Java代码 

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

[java] view plaincopy

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

 

ext tree 动态修改节点样式

Java代码 

1. function updateTreeNodeIcon(treeNode,oldIconCls,newIconCls){   
2.       if(!treeNode)   
3.            return;   
4.       var imgHtmlEl = treeNode.getUI().getIconEl();    
5.       treeNode.iconCls = newIconCls;   
6.       Ext.Element.fly(imgHtmlEl).removeClass(oldIconCls);   
7.       Ext.Element.fly(imgHtmlEl).addClass(newIconCls);   
8. }  

[java] view plaincopy

1. function updateTreeNodeIcon(treeNode,oldIconCls,newIconCls){  
2.       if(!treeNode)  
3.            return;  
4.       var imgHtmlEl = treeNode.getUI().getIconEl();   
5.       treeNode.iconCls = newIconCls;  
6.       Ext.Element.fly(imgHtmlEl).removeClass(oldIconCls);  
7.       Ext.Element.fly(imgHtmlEl).addClass(newIconCls);  
8. }  

 

 

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

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

 

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

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

js 代码Java代码 

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

[java] view plaincopy

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

 

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

js 代码Java代码 

1. node.attributes.type      
2.    

[java] view plaincopy

1. node.attributes.type     
2.    

 

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

js 代码

 

 

js代码 

1. prepareCtx:function(node, e){       
2.         node.select();       
3.         if(node.attributes.type=="3");{       
4.        ctxMenu.showAt(e.getXY());       
5.         }       
6.        if(node.attributes.type=="4"){       
7.          ctxMenu1.showAt(e.getXY());       
8.        }       
9.       }      

[java] view plaincopy

1. prepareCtx:function(node, e){      
2.         node.select();      
3.         if(node.attributes.type=="3");{      
4.        ctxMenu.showAt(e.getXY());      
5.         }      
6.        if(node.attributes.type=="4"){      
7.          ctxMenu1.showAt(e.getXY());      
8.        }      
9.       }      

 

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