extjs技术之tree技术分析事件触发

 

<script type="text/javascript">
var Tree = Ext.tree;
var tree = null;
Ext.onReady(function(){
    tree = new Tree.TreePanel({
        el:'tree-div',
        onlyLeafCheckable:false,
        rootVisible: true,
        autoScroll:true,
        animate:false,//是否动画
        enableDD:true,// 是否支持拖放
        containerScroll:true,
        lines:true,
        checkModel:'cascade',
        loader:new Tree.TreeLoader({dataUrl:"json.jsp",
                       baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI}
        })
      });
       
    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: '常量科目维护',
        id:'root'
    });

    //绑定节点追加事件
     tree.on('append', function(tree, node){
       //if(node.id == 'foo'){
      //  alert("append");
       // }
     });

    //绑定节点切换事件
     tree.getSelectionModel().on('selectionchange', function(sm, node){
          // alert("selectionchange");
     });

    //绑定节点点击事件
    tree.on('click', function(node){
        if(node.id!='root'){
            alert(node.id);
            alert(node.text);
        }
    });

    //绑定节点加载之前事件
    tree.on('beforeload',function(node){  
        if(node.id!='root'){
             // alert("beforeload");;
          }
    });

    //绑定节点右键菜单功能
    tree.on('contextmenu',function(node,event){ 
         // alert("node.id="+ node.id);
          event.preventDefault(); //这行是必须的
          rightClick.showAt(event.getXY());//取得鼠标点击坐标，展示菜单
         });

    //绑定节点拖动事件，拖动以后所需的信息已经捕获，与后台联动的函数 加上即可实现TREE的拖拽
    function handleMoveNode(tree, node, oldParent, newParent, index) {
        alert("鼠标拖拽事件");
        alert("node.attributes.id = " + node.attributes.id +"/n" + "node.parentNode.attributes.id = " + node.parentNode.attributes.id )
        alert("newParent.attributes.id = " + newParent.attributes.id);
        alert("oldParent.attributes.id = " + oldParent.attributes.id);       
    }

    tree.addListener('movenode', handleMoveNode);
    tree.addListener('beforemovenode', function(t,node,oldParent,newParent,i) {
        if(oldParent.id == newParent.id ) {
            alert("Re-ordering not supported");
            return false;
        }
    });

    //定义右键菜单
    var rightClick = new Ext.menu.Menu({
        id :'rightClickCont',
        items : [{
            id:'rMenu1',
            text : '菜单1',
            //增加菜单点击事件
            handler:function (){
                 alert('我被点击了！');
            }
        }, {
            id:'rMenu2',
            text : '菜单2'
        }, {
            id:'rMenu3',
            text : '菜单3'
        }]
     });
    tree.setRootNode(root);
    // render the tree
    tree.render();
    root.expand();
  });
</script>