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);}); 1 楼 zqding 2011-01-19 给个图和页面上的调用呀，完整点呵。 2 楼 无双Rama 2011-01-21 zqding 写道给个图和页面上的调用呀，完整点呵。