Ext TreeCombo 树形 下拉框

 

参考:http://www.extjs.com/forum/showthread.php?38654-Tree-in-a-Combo./page4

在别人基础上稍作修改

1.添加hiddenName，使传值时跟Ext.form.ComboBox类似;

2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;

 

代码如下:

/**
 * @version Base on Ext3.0
 * @class Ext.ux.TreeCombo
 * @extends Ext.form.TriggerField
 */

Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {

	// triggerClass: 'x-form-tree-trigger',

	initComponent : function() {
		this.readOnly = true;
		Ext.ux.TreeCombo.superclass.initComponent.call(this);
		this.on('specialkey', function(f, e) {
					if (e.getKey() == e.ENTER) {
						this.onTriggerClick();
					}
				}, this);
		this.getTree();
	},

	onTriggerClick : function() {
		this.getTree().show();
		this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
	},

	getTree : function() {
		if (!this.treePanel) {
			if (!this.treeWidth) {
				this.treeWidth = Math.max(150, this.width || 200);
			}
			if (!this.treeHeight) {
				this.treeHeight = 200;
			}
			this.treePanel = new Ext.tree.TreePanel({
				renderTo : Ext.getBody(),
				loader : this.loader || new Ext.tree.TreeLoader({
							preloadChildren : (typeof this.root == 'undefined'),
							url : this.dataUrl || this.url
						}),
				root : this.root || new Ext.tree.AsyncTreeNode({
							children : this.children
						}),
				rootVisible : (typeof this.rootVisible != 'undefined')
						? this.rootVisible
						: (this.root ? true : false),
				floating : true,
				autoScroll : true,
				minWidth : 200,
				minHeight : 200,
				width : this.treeWidth,
				height : this.treeHeight,
				listeners : {
					hide : this.onTreeHide,
					show : this.onTreeShow,
					click : this.onTreeNodeClick,
					expandnode : this.onExpandOrCollapseNode,
					collapsenode : this.onExpandOrCollapseNode,
					resize : this.onTreeResize,
					scope : this
				}
			});
			this.treePanel.show();
			this.treePanel.hide();
			this.relayEvents(this.treePanel.loader, ['beforeload', 'load',
							'loadexception']);
			if (this.resizable) {
				this.resizer = new Ext.Resizable(this.treePanel.getEl(), {
							pinned : true,
							handles : 'se'
						});
				this.mon(this.resizer, 'resize', function(r, w, h) {
							this.treePanel.setSize(w, h);
						}, this);
			}
		}
		return this.treePanel;
	},

	onExpandOrCollapseNode : function() {
		if (!this.maxHeight || this.resizable)
			return; // -----------------------------> RETURN
		var treeEl = this.treePanel.getTreeEl();
		var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;
		var ulEl = treeEl.child('ul'); // Get the underlying tree element
		var heightRequired = ulEl.getHeight() + heightPadding;
		if (heightRequired > this.maxHeight)
			heightRequired = this.maxHeight;
		this.treePanel.setHeight(heightRequired);
	},

	onTreeResize : function() {
		if (this.treePanel)
			this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
	},

	onTreeShow : function() {
		Ext.getDoc().on('mousewheel', this.collapseIf, this);
		Ext.getDoc().on('mousedown', this.collapseIf, this);
	},

	onTreeHide : function() {
		Ext.getDoc().un('mousewheel', this.collapseIf, this);
		Ext.getDoc().un('mousedown', this.collapseIf, this);
	},

	collapseIf : function(e) {
		if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {
			this.collapse();
		}
	},

	collapse : function() {
		this.getTree().hide();
		if (this.resizer)
			this.resizer.resizeTo(this.treeWidth, this.treeHeight);
	},

	// private
	validateBlur : function() {
		return !this.treePanel || !this.treePanel.isVisible();
	},

	setValue : function(v) {
		this.startValue = this.value = v;
		if (this.treePanel) {
			var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用
			if (n) {
				n.select();//默认选中节点
				this.setRawValue(n.text);
				if (this.hiddenField)
					this.hiddenField.value = v;
			}
		}
	},

	getValue : function() {
		return this.value;
	},

	onTreeNodeClick : function(node, e) {
		this.setRawValue(node.text);
		this.value = node.id;
		if (this.hiddenField)
			this.hiddenField.value = node.id;
		this.fireEvent('select', this, node);
		this.collapse();
	},
	onRender : function(ct, position) {
		Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);
		if (this.hiddenName) {
			this.hiddenField = this.el.insertSibling({
						tag : 'input',
						type : 'hidden',
						name : this.hiddenName,
						id : (this.hiddenId || this.hiddenName)
					}, 'before', true);

			// prevent input submission
			this.el.dom.removeAttribute('name');
		}
	}
});

 

示例:

1:选择页面，在定义了根节点的情况下逐级加载

 

var businessId = new Ext.ux.TreeCombo({
			fieldLabel : '业务名称',
			width : 120,
			allowBlank : false,
			//name : 'param.businessId',
			hiddenName : 'param.businessId',
			rootVisible : true,
			root : new Ext.tree.AsyncTreeNode({
						text : '业务列表',
						expanded : true,
						levelNum : 0,
						id : '100000'
					}),
			dataUrl : 'getChild_business.do?param.superId=100000'
		});

businessId.treePanel.on('beforeload', function(node) {
	businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='
			+ node.id;});

后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]


 

   

 2.显示并修改(expandAll后再setValue)

var businessId = new Ext.ux.TreeCombo({
			fieldLabel : '业务名称',
			width : 120,
			allowBlank : false,
			hiddenName : 'param.businessId',
			rootVisible : false,
			dataUrl : 'getAllJson_business.do'
		});

businessId.treePanel.on('load', function() {
			businessId.setValue('<s:property value="#param.businessId" />');
		});
businessId.treePanel.expandAll();

 

后台请求返回的json如:
[{
			"id" : 100000,
			"text" : "业务列表",
			"leaf" : false,
			"superId" : 0,
			"children" : [{

						"id" : 200024,
						"text" : "业务23",
						"leaf" : false,
						"superId" : 100000,
						"children" : [...略]
					}, {

						"id" : 200043,
						"text" : "业务2",
						"leaf" : false,
						"superId" : 100000,
						"children" : [...略]
					}]
		}]

 

 

 
3.只读(直接用Ext.form.ComboBox)

后台数据返回对应项即可
[{"value":"200043","display":"业务2"}]

 

 

 

 

----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------

 

var childrenArrData = 
			[{  id:'-1',
			  text:'根节点',
			  value:'-1',
			  leaf:false,
			  children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]
			 }];
						
						
var treeCombo = new Ext.ux.TreeCombo({
	fieldLabel : 'xx',
	width : 300,
	name : 'treeCombo',
	hiddenName : 'treeCombo',
	rootVisible : false,
	root:new Ext.tree.AsyncTreeNode({
	   id:"-1",   
	   text:"根节点", 
	   expanded:true,
	   leaf:false,
	   children: childrenArrData
	})
});
	
treeCombo.treePanel.on('click',function(node){
	alert(node.attributes.value);//取节点属性
});

//先展开，再设值。这样才会显示text值，不然会显示value去
function setTaskSerial(val){
	treeCombo.treePanel.expandAll();
	treeCombo.setValue(val);
}
   
function gettreeCombo(){
	return treeCombo.getValue();
}

   ----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------

	onTriggerClick : function() {
		if(!this.disabled){//modify 20121204
			this.getTree().show();
			this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');
		}
	},

    在原来的基础上加个判断，这样treeCombo.disable();后点击下拉箭头就能不让下拉了。