LearningExtJS_new 之 tree 的应用学习(六)
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";});});
页:
[1]