Ext选择树

点击按钮后会弹出一个窗体，窗体里面包含两个区域，左边的源选择树 和 右边选择后的树，单击确定后会把用户选择后的树的值保存到一个textArea里面

/**
 * 遍历节点回调函数并置为选中状态
 * 
 * @param {Object}
 *            node
 */
var ay_cell_NodeChecked = function(node) {
	node.getUI().toggleCheck(true);
};
/**
 * 遍历节点回调函数并置为非选中状态
 * 
 * @param {Object}
 *            node
 */

var ay_cell_NodeNoChecked = function(node) {
	node.getUI().toggleCheck(false);
};

/**
 * 在取消节点选中状态时，需要判断当前选中父节点是否存在子节点被选中 ay_cell_ChildrenNodes
 * 
 * @param {Object}
 *            node
 */
var ay_cell_ChildrenNodes = function(node) {
	var selNodes = node.childNodes;
	node.getUI().toggleCheck(false);
	Ext.each(selNodes, function(nodes) {
		if (nodes.attributes.checked) {
			node.getUI().toggleCheck(true);
		}
	});
};

/**
 * 小区 左边的checkTree
 */
var tree = new Ext.tree.TreePanel({
			height : 490,
			useArrows : true,
			autoScroll : true,
			animate : true,
			containerScroll : true,
			rootVisible : false,
			frame : true,
			root : {
				nodeType : 'async',
				children : [{
					text : 'To Do',
					cls : 'folder',
					checked : false,
					children : [{
						text : 'Go jogging',
						leaf : true,
						checked : false
					}, {
						text : 'Take a nap',
						leaf : true,
						checked : false
					}, {
						text : 'Climb Everest',
						leaf : true,
						checked : false
					}]
				}, {
					text : 'Remodel Project',
					cls : 'folder',
					checked : false,
					children : [{
						text : 'Finish the budget',
						leaf : true,
						checked : false
					}, {
						text : 'Call contractors',
						leaf : true,
						checked : false
					}, {
						text : 'Choose design',
						leaf : true,
						checked : false
					}]
				}]
			},
			// dataUrl: '/bsapp/pages/ba/js/basic/tree.json',
			listeners : {
				'checkchange' : function(node, checked) {
					// 暂停触发所有的事件,true不暂停、false暂停
					tree.suspendEvents(false);
					if (checked) {
						// 遍历该节点下所有子节点，包含本节点，fff为回调函数
						node.cascade(ay_cell_NodeChecked);
						// 遍历该节点向上所有祖先节点，包含本节点，fff为回调函数
						node.bubble(ay_cell_NodeChecked);
					} else {
						node.cascade(ay_cell_NodeNoChecked);// 遍历该节点下所有子节点，包含本节点，no_fff为回调函数
						node.parentNode.bubble(ay_cell_ChildrenNodes);// 遍历该节点向上所有祖先节点，不包含本节点，no_ttt为回调函数
					}
					tree.resumeEvents();// 重新触发事件
				}
			}
		});

/**
 * 右边的checkTree
 * 
 * @param {Object}
 *            node
 * @param {Object}
 *            checked
 */
var tree1 = new Ext.tree.TreePanel({
			height : 490,
			useArrows : true,
			autoScroll : true,
			animate : true,
			enableDD : true,
			containerScroll : true,
			rootVisible : false,
			frame : true,
			root : {
				nodeType : 'async'
			},
			listeners : {
				'checkchange' : function(node, checked) {
					// 暂停触发所有的事件,true不暂停、false暂停
					tree1.suspendEvents(false);
					if (checked) {
						// 遍历该节点下所有子节点，包含本节点，ay_cell_NodeChecked为回调函数
						node.cascade(ay_cell_NodeChecked);
						// 遍历该节点向上所有祖先节点，包含本节点，ay_cell_NodeChecked为回调函数
						node.bubble(ay_cell_NodeChecked);
					} else {
						// 遍历该节点下所有子节点，包含本节点，ay_cell_NodeNoChecked为回调函数
						node.cascade(ay_cell_NodeNoChecked);
						// 遍历该节点向上所有祖先节点，不包含本节点，ay_cell_ChildrenNodes为回调函数
						node.parentNode.bubble(ay_cell_ChildrenNodes);
					}
					// 重新触发事件
					tree1.resumeEvents();
				}
			}
		});
/**
 * 小区
 * 
 * @memberOf {TypeName}
 */
var ay_cell_formPanel = new Ext.form.FormPanel({
			height : "99%",
			border : false,
			bodyStyle : 'padding:3px;',
			layout : 'column',
			items : [{
				columnWidth : .5,
				height : 520,
				border : false,
				bodyStyle : 'padding:3px;',
				items : [{
					id : 'search1',
					xtype : 'textfield',
					width : 191
				}, {
					id : '111',
					border : false,
					height : 550,
					items : [tree]
				}]
			}, {
				width : 25,
				border : false,
				bodyStyle : 'padding:1px 2px;',
				items : [{
					xtype : 'panel',
					height : 200,
					bodyStyle : "margin:2px",
					hideLabel : true,
					bodyBorder : false,
					border : false
				}, {
					xtype : 'button',
					text : ' > ', // 增加
					labelStyle : 'color:red;font-weight:bold;',
					width : '100%',
					handler : function() {
						var msg = '', selNodes = tree.getChecked();
						var node1, node2;
						Ext.each(selNodes, function(node) {
							var radix = tree1.root;
							if (node.getDepth() == 1) {
								if (null == radix.findChild("id", node.id)) {
									node1 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									radix.appendChild(node1);
								}
							}
							if (node.getDepth() == 2) {
								node1 = radix.findChild("id",
										node.parentNode.id);
								if (null == node1.findChild("id", node.id)) {
									node2 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									node1.appendChild(node2);
								}
							}
							if (node.getDepth() == 3) {
								node2 = node1.findChild("id",
										node.parentNode.id);
								if (null == node2.findChild("id", node.id)) {
									var node3 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									node2.appendChild(node3);
								}
							}
						});
						// 展开所有节点
						for (var j = 0; j < tree1.root.childNodes.length; j++) {
							tree1.root.childNodes[j].expand(true);
						}
					}
				}, {
					xtype : 'button',
					// 删除
					text : ' < ',
					width : '100%',
					handler : function() {
						var selNodes = tree1.getChecked();
						var node1, node2;
						Ext.each(selNodes, function(node) {
							var radix = tree.root;
							if (node.getDepth() == 1) {
								if (null == radix.findChild("id", node.id)) {
									node1 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									radix.appendChild(node1);
								}
							}
							if (node.getDepth() == 2) {
								node1 = radix.findChild("id",
										node.parentNode.id);
								if (null == node1.findChild("id", node.id)) {
									node2 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									node1.appendChild(node2);
								}
							}
							if (node.getDepth() == 3) {
								node2 = node1.findChild("id",
										node.parentNode.id);
								if (null == node2.findChild("id", node.id)) {
									var node3 = new Ext.tree.TreeNode({
										id : node.id,
										text : node.text,
										leaf : node.leaf,
										checked : node.attributes.checked
									});
									node2.appendChild(node3);
								}
							}
						});
						// 去掉所有选中的叶子节点
						for (var i = 0; i < selNodes.length; i++) {
							if (selNodes[i].isLeaf()) {
								selNodes[i].destroy();
							}
						}
						// 去掉所有空子节点的父节点
						for (var ii = (tree1.getChecked().length - 1); ii >= 0; ii--) {
							if (tree1.getChecked()[ii].childNodes == "") {
								tree1.getChecked()[ii].destroy();
							}
						}
						// 展开所有节点
						tree.getRootNode().expand(true);
					}
				}]
			}, {
				columnWidth : .5,
				height : 520,
				border : false,
				bodyStyle : 'padding:3px;',
				items : [{
					id : 'search2',
					xtype : 'textfield',
					width : 191
				}, {
					id : 'tree1',
					border : false,
					height : 550,
					items : [tree1]
				}]
			}]
		});
    /**
	 * 小区 窗体
	 */
var ay_cell_win = new Ext.Window({
	id : 'win1',
	title : '选择小区',
	width : 450,
	height : 607,
	modal : true,
	bodyStyle : 'padding:5px;',
	draggable : true,
	constrain : true,
	closeAction : 'hide',
	items : [ay_cell_formPanel],
	buttons : [{
		id : 'sure',
		text : '确定',
		handler : function() {
			// 树的内容显示到下面的textArae里面
			ay_cell_win.hide();
			var textStr = "";
			var treeRoot = tree1.root;
			var nodes = treeRoot.childNodes;
			Ext.each(nodes, function(node) {
				textStr += node.text;
				textStr += " { ";
				if (node.childNodes) {
					Ext.each(node.childNodes, function(chlidNode) {
						textStr += chlidNode.text;
						textStr += ", ";
					})
					// 去掉最后一个逗号
					textStr = textStr.substring(0, textStr.length - 2);
				}
				textStr += " }, ";
			})
			// 去掉最后一个逗号
			textStr = textStr.substring(0, textStr.length - 2);
			// console.log(textStr);
			Ext.get("textareas").dom.value = textStr;
		}
	}, {
		id : 'cancel',
		text : '取消',
		handler : function() {
			ay_cell_win.hide();
		}
	}]
});

ay_btn = new Ext.Button({
	id : 'button1',
	xtype : 'button',
	width : 80,
	text : '选择'
});
ay_btn.on('click', function() {
	// 在初始化时加载数据
	ay_cell_win.show();
	tree.root.expand(true);
	tree1.root.expand(true);
});