为Ext 自定义右键菜单

接着上次的学习：

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());  //得到坐标
    });
});

效果图如下：