extjs treepanel 右键菜单实现
?效果图：
1：
?
2：
3：
1：html页面
<style type="text/css"> .leaf { background:url(../../script/extjs/resources/images/default/tree/drop-add.gif) !important; }<!--节点右键菜单的叶子图片--> </style><link rel="stylesheet" type="text/css" href="../../script/extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../../script/extjs/adapter/ext/ext-base.js"></script> <!-- ENDLIBS --> <script type="text/javascript" src="../../script/extjs/ext-all.js"></script><!-- Common Styles for the examples --><link rel="stylesheet" type="text/css" href="../../script/extjs/shared/examples1.css" /></head><body><script type="text/javascript" src="../../script/extjs/shared/examples1.js"></script><!-- EXAMPLES --><script type="text/javascript" src="../../script/treePanel.js"></script><!-- EXAMPLES --><body> <div id="container" > </div> </body>2：js
Ext.onReady(function(){ var mytree = new Ext.tree.TreePanel({ renderTo:'container', title: '图片配置', height:600, widht:900, lines:true, useArrows:true, autoScroll:true, animate:true, //enableDD:true, containerScroll: true, resizable : true, rootVisible: false, frame: true, root: { nodeType: 'async' }, // auto create TreeLoader // dataUrl: 'treePanel.json', loader:new Ext.tree.TreeLoader({ url:"ImageSortJson2?type=load",//服务器处理数据代码 listeners:{ "loadexception":function(loader,node,response){ //加载服务器数据,直到成功 } } }), listeners:{ "contextmenu":function(node,e){ var nodemenu=new Ext.menu.Menu({ items:[{ text:"添加结点", iconCls:'leaf',//右键名称前的小图片 handler:function(){ Ext.MessageBox.prompt("请输入新项名称","",function(e,text){ if(e=="ok") { Ext.Ajax.request({ url: 'ImageSortJson2?type=add&gnbh='+node.id+'&value='+text, success:function(request) { mytree.root.reload();//数的重新加载 mytree.root.expand(true,false); }, failure:function(){ alert("添加失败"); } }); } else { alert("取消了"); } }) } },{ text:"编辑结点", icon: '../../script/extjs/resources/images/default/tree/leaf.gif', cls: 'x-btn-text-icon', handler:function(){ Ext.MessageBox.prompt("请输入此项新名称","",function(e,text){ if(e=="ok") { Ext.Ajax.request({ url: 'ImageSortJson2?type=edit&gnbh='+node.id+"&value="+text,//传递需要的值，服务器会执行修改 success:function(request) { mytree.root.reload(); mytree.root.expand(true,false); }, failure:function(){ alert("编辑失败"); } }); } else { } }) } },{ text:"删除结点", icon: '../../script/extjs/resources/images/default/tree/delete.jpg', cls: 'x-btn-text-icon', // iconCls:'deletess', handler:function(){ Ext.MessageBox.confirm("提示","是否确定删除？",function(e){ if(e=="yes") { Ext.Ajax.request({ url: 'ImageSortJson2?type=delete&gnbh='+node.id,//根据id删除节点 success:function(request) { mytree.root.reload(); mytree.root.expand(true,false); }, failure:function(){ alert("删除失败"); } }); } }); } }] }); nodemenu.showAt(e.getPoint());//menu的showAt，不要忘记 } } }); mytree.getRootNode().expand(true);}); ??3:json格式[{ id:'01', text:'a', children:[ { id:'0102',text:'b',leaf:true}, {id:'0103',text:'c',leaf:true}, {id:'0101',text:'d',leaf:true} ] }]