- ext tree 动态修改各个节点名称icon小图标
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小图标
- });
- }
"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);
- }
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.javaeye.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"}]
[{"text":"a","id":"1","cls":"folder","type":"4"},{"text":"b","id":"2","cls":"folder","type":"3"}]
通过 Tree.TreeLoader 加载数据后可以通过如下语法读取type自定义属性
js 代码
- node.attributes.type
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());
- }
- }
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目录