ExtJS表单之下拉树

ExtJS表单之下拉树
作者：zccst

一、数据源

					var store_type = Ext.util.JSON.encode(o.store_type);
					var store_type_obj = eval( "(" + store_type + ")" );
					setStoreTreeByNode(store_type_obj);

二、展示

	Ext.QuickTips.init();
	var storetree = new Ext.tree.TreePanel({
		//el : "container",
		animate : true,
		title : "请点击选择",
		collapsible : true,
		enableDD : true,
		enableDrag : true,
		rootVisible : false,
		autoScroll : true,
		autoHeight : true,
		width : 150,
		lines : true
	});

	// 根节点
	var storeroot = new Ext.tree.TreeNode({
		id : "root",
		text : "根节点",
		checked : false
	});
	storetree.setRootNode(storeroot);

	//设置监听
	storetree.on('checkchange', function(node, checked) {
		node.expand();
		node.attributes.checked = checked;
		node.eachChild(function(child) {
			child.ui.toggleCheck(checked);
			child.attributes.checked = checked;
			child.fireEvent('checkchange', child,
					checked);
		});
	}, storetree);

	function setStoreTreeByNode(store_type_obj){
		var node = storeroot.appendChild(new Ext.tree.TreeNode({
			text : '存储机型',
			allowDrag : false,
			checked : false
		}));
		for(var i = 0; i < store_type_obj.length; i++){
			node.appendChild(new Ext.tree.TreeNode({
				text : store_type_obj[i].model,
				allowDrag : false,
				checked : false
			}));
		}
	}

	//下拉树
	var storeComboxWithTree = new Ext.form.ComboBox({  
		store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
		editable:false,  
		mode: 'local',  
		triggerAction:'all',  
		maxHeight: 240,  
		tpl: "<tpl for='.'><div style='height:240px'><div id='storetree'></div></div></tpl>",  
		selectedClass:'',  
		onSelect:Ext.emptyFn,
		emptyText:'请选择机型...'
	});
	storetree.on('click',function(node){
		storeComboxWithTree.setValue(node.text);
		storeComboxWithTree.collapse();
	});  
	storeComboxWithTree.on('expand',function(){  
		storetree.render('storetree');  
	});

三、获取选中的值

			var s = storetree.getChecked();
			var checked_s = new Array();
			for (var j = 0; j < s.length; j ++){
				checked_s.push(s[j].text);
			}
			//if(checked_s.length == 0){alert('选择不能为空');return false;}
			var str_s = checked_s.toString();

版本一：

var comboxWithTree = new Ext.form.ComboBox({   
        store:new Ext.data.SimpleStore({fields:[],data:[[]]}),   
        editable:false,   
        mode: 'local',   
        triggerAction:'all',   
        maxHeight: 200,   
        tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",   
        selectedClass:'',   
        onSelect:Ext.emptyFn   
    });   
    var tree = new Ext.tree.TreePanel({   
        loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),   
        border:false,   
         root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})   
      });   
      tree.on('click',function(node){   
          comboxWithTree.setValue(node.text);   
          comboxWithTree.collapse();   
      });   
    comboxWithTree.on('expand',function(){   
        tree.render('tree');   
      });   
    comboxWithTree.render('comboxWithTree');  

版本二：

var comboxWithPanel = new Ext.form.ComboBox({   
    store:new Ext.data.SimpleStore({fields:[],data:[[]]}),   
    editable:false,   
    mode: 'local',   
    triggerAction:'all',   
    maxHeight: 200,   
    tpl: '<div style="height:200px"><div id="panel"></div></div>',   
    selectedClass:'',   
    onSelect:Ext.emptyFn   
});   
comboxWithPanel.render('comboxWithPanel');   
var tree2 = new Ext.tree.TreePanel({   
    loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),   
    border:false,   
    autoScroll:true,   
    root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})   
    });   
var border = new Ext.Panel({   
    title:'面板title',   
    layout:'fit',   
    border:false,   
    height :200,   
    tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],   
    bbar:[{text:'确定二'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'查找二'}],   
    items: tree2   
    });   
comboxWithPanel.on('expand',function(){   
    border.render('panel');   
    });  

另一个三级节点的实例

function setDepTreeByNode(obj){
		rootnode = new Ext.tree.TreeNode({
			text : '全部',
			allowDrag : false,
			checked : false
		});
		deproot.appendChild(rootnode);     //0级
		var tmpDep = "";
		var tmpPro = "";
		var tmpSer = "";
		var departnode  = null;
		var productnode = null;
		var servicenode = null;
		for( var i = 0; i < obj.length; i++){
			if(!tmpDep){
				tmpDep = obj[i].department;
				tmpPro = obj[i].product;
				tmpSer = obj[i].service;
			}

			// 仅执行一次
			if(departnode == null && productnode == null && servicenode == null){
				departnode = new Ext.tree.TreeNode({
					text : obj[i].department,
					allowDrag : false,
					checked : false
				});
				productnode = new Ext.tree.TreeNode({
					text : obj[i].product,
					allowDrag : false,
					checked : false
				});
				servicenode = new Ext.tree.TreeNode({
					text : obj[i].service,
					allowDrag : false,
					checked : false
				});
				rootnode.appendChild(departnode);       //一级
				departnode.appendChild(productnode);    //二级
				productnode.appendChild(servicenode);   //三级
				continue;//第一轮循环结束
			}

			// 追加二级节点
			if(obj[i].department == tmpDep){
				//追加三级节点
				if(obj[i].product == tmpPro){
					servicenode = new Ext.tree.TreeNode({
						text : obj[i].service,
						allowDrag : false,
						checked : false
					});
					productnode.appendChild(servicenode);//三级
					tmpSer = obj[i].service;
				}else{
					productnode = new Ext.tree.TreeNode({
						text : obj[i].product,
						allowDrag : false,
						checked : false
					});
					servicenode = new Ext.tree.TreeNode({
						text : obj[i].service,
						allowDrag : false,
						checked : false
					});
					departnode.appendChild(productnode);    //二级
					productnode.appendChild(servicenode);   //三级
					tmpPro = obj[i].product;
					tmpSer = obj[i].service;
				}
			}else{
				//追加一级节点
				departnode = new Ext.tree.TreeNode({
					text : obj[i].department,
					allowDrag : false,
					checked : false
				});
				productnode = new Ext.tree.TreeNode({
					text : obj[i].product,
					allowDrag : false,
					checked : false
				});
				servicenode = new Ext.tree.TreeNode({
					text : obj[i].service,
					allowDrag : false,
					checked : false
				});
				rootnode.appendChild(departnode);   //一级
				departnode.appendChild(productnode);    //二级
				productnode.appendChild(servicenode);//三级
				//更新当前值
				tmpDep = obj[i].department;
				tmpPro = obj[i].product;
				tmpSer = obj[i].service;
			}
		}
	}

select distinct * from (select department,product,service from service_list) a;

如果您觉得本文的内容对您的学习有所帮助，您可以微信：
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]