接着上次的学习:
Ext.onReady(function(){ //先建树 var tree = new Ext.tree.TreePanel({el:'test'}); //建造树 test与页面div的id对应 var root = new Ext.tree.TreeNode({text:'我是祖先'}); //根节点 var node1 = new Ext.tree.TreeNode({text:'我是爷爷'}); var node2 = new Ext.tree.TreeNode({text:'我是爷爷的兄弟'}); var node3 = new Ext.tree.TreeNode({text:'我是父亲'}); var node4 = new Ext.tree.TreeNode({text:'我是孙子'}); node3.appendChild(node4); //添加相应的子节点 root.appendChild(node1); node1.appendChild(node3); root.appendChild(node2); tree.setRootNode(root); //设置根节点 tree.render(); root.expand(true,true); //是否自动展开,不需要点击子节点 //树是否可以编辑节点名称 var treeEditor = new Ext.tree.TreeEditor(tree,{ allowBlank:false }); //自定义右键菜单 var contextmenu= new Ext.menu.Menu({ id : 'ContextMenu', items:[{ text:'右击', handler:function(){ alert('右击成功了'); } },{ text:'删除', handler:function(){ alert('你点击了删除 '); } },{ text:'属性', handler:function(){ alert('点击了属性项'); } } ] }); tree.on("contextmenu", function(node, e){ e.preventDefault(); //防止弹出IE右键菜单 node.select(); contextmenu.showAt(e.getXY()); //得到坐标 }); });
效果图如下: