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

最新推荐文章于 2017-11-25 18:58:15 发布

chihailf

最新推荐文章于 2017-11-25 18:58:15 发布

阅读量587

点赞数

文章标签： tree extjs function

本文详细介绍了如何使用ExtJS构建树形控件，包括设置属性、绑定各种事件（如点击、追加、切换等）、实现拖放功能及自定义右键菜单。通过具体示例展示了树形控件的各种交互特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    //绑定节点追加事件
     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>