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";
								});
});