带树的下拉框

阅读更多

项目中用到的一个带树的下拉框

		var unitCB = new Ext.form.ComboBox({// 所属单位选择框
			fieldLabel : '所属单位',
			resizable : true,
			store : new Ext.data.SimpleStore({
				fields : [],
				data : [[]]
			}),
			editable : false,
			valueField : 'id',
			displayField : 'text',
			value : ' ',
			maxHeight : 390,
			// labelStyle : micolor,
			anchor : '84%',
			mode : 'local',
			triggerAction : 'all',
			allowBlank : false,
			onSelect : Ext.emptyFn(),
			emptyText : '请选择所属单位'
		});

		add_unitCB.tpl = '
';
		var orgTreeloader = new Ext.tree.TreeLoader({
			url : '/stm/system/org.do?method=findOrgTree'
		});

		orgTreeloader.on('beforeload', function(orgTreeloader, node) {
			this.baseParams.id = node.attributes.id; // set parameter
		});

		var orgTreeRoot = new Ext.tree.AsyncTreeNode({
			id : '00',
			text : '根节点'
		});

		var orgTree = new Ext.tree.TreePanel({
			width : 210,
			autoScroll : true,
			containerScroll : true,
			collapsible : true,
			loader : orgTreeloader,
			root : orgTreeRoot,
			animate : false,
			border : false,
			rootVisible : true,
			border : false
		});

		var org_id; // 存储所属单位的ID
		// 监听下拉树的节点单击事件
		orgTree.on('click', function(node) {
			org_id = node.attributes.id;
			unitCB.setValue(node.text);
			unitCB.collapse();
		});
		// 默认选择总公司
		unitCB.on('render', function() {
			org_id = '00';
			unitCB.setValue('根节点');
		});
		// 监听下拉框的下拉展开事件 下拉框中加入树
		unitCB.on('expand', function() {
			// 将UI树挂到treeDiv容器
			orgTree.root.reload(); // 每次下拉都会加载数据
			// orgTree.root.expand(); //只是第一次下拉会加载数据
			orgTree.render(unitCB.getId() + 'orgTreeDiv');
		});