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:'../info/rss.do?method=getJsonArray', baseAttrs: {uiProvider: Ext.tree.TreeCheckNodeUI} }) }); // set the root node var root = new Tree.AsyncTreeNode( { "text":"我的网摘", "id":"01", "allowDrag":false //false表示不能被拖动 } ); //绑定节点加载之前事件 tree.on('beforeload',function(node){ if(node.id!='01'){ tree.loader.dataUrl = '../info/rss.do?method=getChildJsonArray&nodeid='+node.id; } }); //绑定节点点击事件 /**//* tree.on('click', function(node){ if(node.id!='root'){ alert(node.id); alert(node.text); alert(node.href); } }); */ //绑定节点拖动事件,找了很久树节点拖动的实现,终于在老外的帖子发现上了这个实现,拖动以后所需的信息已经捕获,与后台联动的函数 加上即可实现TREE的拖拽 tree.on('nodedrop', function(e){ if(e.point=='append'){ alert('当前"【'+e.dropNode.text+'】"被放到目录"【'+e.target.text+'】"下!'); var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=append"; var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null); } else if(e.point=='above'){ //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"上面!'); var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=above"; var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null); }else if(e.point=='below'){ //alert('当前"'+e.dropNode.text+'"放在了"'+e.target.text+'"下面!'); var resultUrl = "../info/rss.do?method=treeNodeTuoDong¤RootId="+e.dropNode.id+"&parentRootId="+e.target.id+"&type=below"; var resulthtml = XmlHttpHelper.transmit(false, "get", "text", resultUrl, null, null); } } ); //绑定节点右键菜单功能 tree.on('contextmenu',function(node,event){ // alert("node.id="+ node.id); event.preventDefault(); //这行是必须的 rightClick.showAt(event.getXY());//取得鼠标点击坐标,展示菜单 //alert(node.id); document.getElementById('rootid').value=node.id; }); //定义右键菜单 var rightClick = new Ext.menu.Menu({ id :'rightClickCont', items : [{ id:'rMenu1', text : '编辑', //增加菜单点击事件 handler:function (node){ //alert(node.dropNode.id); } }, { id:'rMenu2', text : '删除' }, { id:'rMenu3', text : '菜单3' }] }); tree.setRootNode(root); // render the tree tree.render(); root.expand(); });
ExtJs tree的操作
最新推荐文章于 2017-11-30 21:28:02 发布