Ext.onReady(function(){ //1.创建异步树 //1>定义加载器,设置参数dataUrl //2>定义根节点,设置文本及信息 //3>定义面板,在renderTo时把树加载到页面中 //2.支持xml数据的加载 使用httpProxy,加载时解析xml // var xmltree = new Ext.tree.TreePanel({ // el : 'treeContainer' // }); // var proxy = new Ext.data.HttpProxy({ // url : 'http://localhost:81/ext/treexml.php' // }); // proxy.load(null, { // read : function(xmlDocument) { // parseXmlAndCreateNodes(xmlDocument); // } // }, function() { // xmltree.render(); // }); //3.树的拖放(Drog && Drop) //1>增加enableDD:true则可以对树节点进行拖放 //2>使用beforemovenode方法,对操作后,后台方法进行处理 //4.树的排序(Sorting) //1>使用new Ext.tree.TreeSorter方法排序树 //2>树在排序时默认使用text属性,可以重写sortType方法,修改要排序的字段 //5.编缉树 //1>使用TreeEditor方法编缉树 //2>用beforecomplete进行后台数据处理 //6.选择模式 //1>treePanel.selModel 事件 selectionchange 事件对选中节点进行处理 //2>设置tree的selModel:new Ext.tree.MultiSelectionModel(),可以进行选择多行 //7.右键菜单 //1>定义菜单,存放菜单功能 memu //2>定义树的contextmenu事件,事件主要菜单显示menu.show //3>处理菜单事件各功能 (如删除只能处理,非多选择) //8.过虑 //1>定义过虑器 treeFilter //2>定义过虑方法treeFilter.filter(value,attr,startNode),三个参数,过虑的值,过虑属性,开始节点 //9.其它特征 //1>树特征 // @lines 线是否显示 // @hlcolor 拖放时浙变色 //2>节点特征 // @checked: true,是否选择 // @href:"",连接地址 // @draggable: false,是否可拖动 // @qtip:"test",提示 涉及tip类 //10.操作数据 //@expandAll 展开树 //@collapseAll折叠树 //@expandPath 根据路径展开 xpatch 写法 /rootID/id //@getNodeById 根据id取节点 //11.其它方法(节点方法) //@findChild 查找当前节点下子元素属性值 //@编沥技巧 子元素下每个节点的price属性值+1 // root.eachChild(function(currentNode) { // currentNode.attributes.price += 30; // }); //12树的事件处理 //1>checkchange 在处理选择框时,ie在选中父节点时,可以默认选择或触发子节点动作 //2>beforeappend 在增加节点时,可以返回true或false,选择是否增加节点 //13.状态管理:处理是否记住前一个节点. //Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); //tree.on('expandnode', function(node) { // Ext.state.Manager.set("treestate", node.getPath()); // }); //var treeState = Ext.state.Manager.get("treestate"); //if (treeState) // tree.expandPath(treeState); //定义加载器 var treeLoader = new Ext.tree.TreeLoader({ dataUrl:"./asynTreeData.js" }); //定义根节点 var treeNode = new Ext.tree.AsyncTreeNode({text:"根目录",id:"0"}) //定义树面板 var treePanel = new Ext.tree.TreePanel({ loader:treeLoader, root:treeNode, renderTo:"treeContainer", enableDD:true, // selModel:new Ext.tree.MultiSelectionModel() lines:false, hlcolor:"ff00ff", trackMouseOver:true }); //拖放后事件处理 treePanel.on("beforemovenode",function(tree,node,oldParent,newParent,index){ //后台操作 // Ext.Ajax.request({ // url : 'http://localhost/node-move.php', // params : { // nodeid : node.id, // newparentid : newParent.id, // oldparentid : oldParent.id, // dropindex : index // } // }); //debug info // console.debug("node Text:" + node.text + ";oldParnet text:" + oldParent.text // + ";newParent text:" + newParent.text + ";index:" + index); }); //排序 new Ext.tree.TreeSorter(treePanel,{ forderSort:true, dir:"asc", sortType:function(node){ return node.attributes.id; } }); // //编缉 // var editTree = new Ext.tree.TreeEditor(treePanel); // //处理编缉完成后 // editTree.on("beforecomplete",function(editor,oldValue,orginalValue){ // console.debug("orginalValue Text:" + oldValue.text + ";orginalValue text:" + orginalValue.text) // }); //选择模式 treePanel.selModel.on("selectionchange",function(selModel,node){ //console.debug("node.id = " + node.length); var curNode = node.findChild('text', "Youngster"); // console.debug(curNode); }); //右键菜单 var deleteHandler = function(){ treePanel.getSelectionModel().getSelectedNode().remove();//不能定义选择模式为多选择 }; var sortHandler = function(){ treePanel.getSelectionModel().getSelectedNode().sort(function(leftNode,rightNode){ return leftNode.text.toUpperCase() > rightNode.text .toUpperCase() ? 1 : -1; }); }; //过虑 var filter = new Ext.tree.TreeFilter(treePanel); var filterHandler = function(){ var node = treePanel.getSelectionModel().getSelectedNode(); filter.filter("Has Children","text",node);//过虑掉下面的子节点 console.debug(node.text); }; var contextMenu = new Ext.menu.Menu({ items:[ { text:"删除",handler:deleteHandler },{ text:"排序",handler:sortHandler },{ text:"过虑",handler:filterHandler } ] }); var contextMenuHandler = function(node){ node.select(); contextMenu.show(node.ui.getAnchor()); }; treePanel.on("contextmenu",contextMenuHandler); //树的方法 // treePanel.expandPath("/0/4/5"); //树事件 treePanel.on("checkchange",function(node,checked){ node.eachChild(function(curNode){ curNode.ui.toggleCheck(); }); }); treePanel.on("beforeappend",function(tree,parentNode,node){ return node.text != "Youngster"; }); });