日期:2014-05-16  浏览次数:20496 次

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'}