Extjs学习总结之24treePanel

树状结构是extjs一个非常有实用价值的组件，在web应用开发中树肯定会有。树的相关操作是一定要会哦。看看extjs的tree吧。

 

treepanel.js:

Ext.onReady(function(){
	Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif",
	/*
	 * 树是由一个一个节点组成，树有唯一的根节点。树的节点分成三种：
	 * 根结点，叶子结点和非叶子结点。这些结点的名称虽然不同，但他们
	 * 的类型都是一样的，都是treeNode，根结点唯一，叶子结点没有子
	 * 结点，但有唯一的父结点；非叶子结点有一个父结点和若干个子结点。
	 */
	
	/*
	 * getNodeById(String id) :Node根据ID找到节点对象，如果没有设置结点ID，
	 * Ext会为结点自动生成一个，不过我们将无法控制，最好为每一个结点指定一个ID
	 * 
	 * getRootNode():获取根结点
	 * getSelectionModel():TreeSelctionModel得到TreePanel的选择模型
	 */
	
	//创建简单的TreePanel
	Ext.QuickTips.init();
	
	//定义根结点
	var root = new Ext.tree.TreeNode({id:1,checked:false,text:"根结点",iconCls:"me-iconCls"});
	var level_1_1 = new Ext.tree.TreeNode({id:2,checked:false,text:"一级_1",iconCls:"me-iconCls"});
	var level_1_2 = new Ext.tree.TreeNode({id:3,checked:false,text:"一级_2",iconCls:"me-iconCls"});
	
	var level_1_1_1 = new Ext.tree.TreeNode({id:4,checked:true,text:"二级_1",iconCls:"me-iconCls"});
	var level_1_1_2 = new Ext.tree.TreeNode({id:5,checked:true,text:"二级_2",iconCls:"me-iconCls"});
	var level_1_1_3 = new Ext.tree.TreeNode({id:6,checked:true,text:"二级_3",iconCls:"me-iconCls"});

	var level_1_1_3_1 = new Ext.tree.TreeNode({id:7,checked:true,text:"二级_3_1",iconCls:"me-iconCls"});
	var level_1_1_3_2 = new Ext.tree.TreeNode({id:8,checked:true,text:"二级_3_2",iconCls:"me-iconCls"});
	var level_1_1_3_3 = new Ext.tree.TreeNode({id:9,checked:true,text:"二级_3_3",iconCls:"me-iconCls"});
	
	level_1_1.appendChild([level_1_1_1,level_1_1_2,level_1_1_3]);
	level_1_1_3.appendChild([level_1_1_3_1,level_1_1_3_2,level_1_1_3_3]);
	root.appendChild([level_1_1,level_1_2]);
	
	
	//定义TreePanel
	var tree = new Ext.tree.TreePanel({
		width:200,
		height:300,
		title:"树",
		
		/*
		 * DefaultSelectionModel只支持单选，如果要支持多选，必须将TreePanel的选择
		 * 模型换成Ext.tree.MultiSelectionModel下面的代码完成了该任务
		 * 
		 */
		//支持多选的选择模型
		selModel:new Ext.tree.MultiSelectionModel(), 
		
		lines:true,//显示连接线  false不显示连接线
		bbar:[{
//			icon:"";
			cls:"x-btn-text-icon",
			text:"上",
			tooltip:"向上选择一个结点",
			tooltipType:"qtip",
			handler:function(){
				var model = tree.getSelectionModel();//获取选择模型
				model.selectPrevious();
			}
		},{
//			icon:"";
			cls:"x-btn-text-icon",
			text:"下",
			tooltip:"向下选择一个结点",
			tooltipType:"qtip",
			handler:function(){
				var model = tree.getSelectionModel();//获取选择模型
				model.selectNext();
			}
		},{
//			icon:"";
			cls:"x-btn-text-icon",
			text:"值",
			tooltip:"获取结点的值",
			tooltipType:"qtip",
			handler:function(){
				var model = tree.getSelectionModel();//获取选择模型
				var selectedNode = model.getSelectedNode();
				if(selectedNode){
					Ext.MessageBox.alert("",selectedNode.text);
				}
			}
		},{
//			icon:"";
			cls:"x-btn-text-icon",
			text:"选",
			tooltip:"自定义选择任何结点",
			tooltipType:"qtip",
			handler:function(){
				Ext.Msg.prompt("路径","请输入要选择的结点的路径",function(btn,txt){
					if(btn == "ok"){
						tree.selectPath(txt,"text");
					}
				});
			}
		},{
//			icon:"";
			cls:"x-btn-text-icon",
			text:"ID",
			tooltip:"根据ID进行选择",
			tooltipType:"qtip",
			handler:function(){
				Ext.Msg.prompt("路径","请输入要选择的结点的路径",function(btn,txt){
					if(btn == "ok"){
						var model = tree.getSelectionModel();//获取选择模型
						var selNode = tree.getNodeById(txt);//根据ID得到结点对象
						model.select(selNode);
					}
				});
			}
		},{ 
			text:"Selected",
//			icon:"",
			cls:"x-btn-text-icon",
			tooltip:"输出所有被选中结点的值",
			tooltipType:"qtip",
			handler:function(){
				var nodes = tree.getChecked();//获取所有结点
				for(var i=0;i<nodes.length;i++){
					alert(nodes[i].text);
				}
			}
		},{ 
			text:"Clear All",
//			icon:"",
			cls:"x-btn-text-icon",
			tooltip:"清除",
			tooltipType:"qtip",
			handler:function(){
				var nodes = tree.getChecked();//获取所有结点
				var selModel = tree.getSelectionModel();
				for(var i=0;i<nodes.length;i++){
					nodes[i].ui.checkbox.checked = false; //被选中的结点取消
					nodes[i].ui.onCheckChange();//与模型数据同步
				}
			}
		},{ 
			text:"Select All",
//			icon:"",
			cls:"x-btn-text-icon",
			tooltip:"选择所有",
			tooltipType:"qtip",
			handler:function(){
				tree.iteratorCheck(tree.getRootNode(),true);
			}
		}]
	});
	
	/**
	 * 触发复选框状态改变事件
	 */
	tree.on("checkchange",function(node){
		var children = node.childNodes;
		for(var i=0;i<children.length;i++){
			children[i].ui.checkbox.checked = node.ui.checkbox.checked;
			children[i].ui.onCheckChange();
		}
		
	});
	
	/**
	 * 递归遍历所有结点
	 */
	tree.iteratorCheck = function(node,checked){
		if(node.hasChildNodes()){
			node.eachChild(function(currentNode){
				tree.iteratorCheck(currentNode,checked);
			});
		}
		node.ui.checkbox.checked = checked;
		node.ui.onCheckChange();
	}
	
	tree.setRootNode(root);
	tree.render("a");
	tree.expandAll();

	
});

效果图：