接着上次的学习:
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()); //得到坐标
});
});
效果图如下:
