ExtJs下拉树的实现

 直接上代码：

 

Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, {
	constructor : function(cfg) {
		cfg = cfg || {};
		Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({
			maxHeight : 300,
			editable : false,
			mode : 'local',
			triggerAction : 'all',
			rootVisible : false,
			selectMode : 'all'
		}, cfg));
	},
	store : new Ext.data.SimpleStore({
		fields : [],
		data : [[]]
	}),
	// 重写onViewClick，使展开树结点是不关闭下拉框
	onViewClick : function(doFocus) {
		var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index);
		if (r) {
			this.onSelect(r, index);
		}
		if (doFocus !== false) {
			this.el.focus();
		}
	},
	tree : null,
	// 隐藏值
	hiddenValue : null,
	getHiddenValue : function() {
		return this.hiddenValue;
	},
	setHiddenValue : function(code, dispText) {
		this.setValue(code);
		Ext.form.ComboBox.superclass.setValue.call(this, dispText);
		this.hiddenValue = code;
	},
	initComponent : function() {
		var _this = this;
		var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId
		this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>"
		this.tree = new Ext.tree.TreePanel({
			border : false,
			enableDD : false,
			enableDrag : false,
			rootVisible : _this.rootVisible || false,
			autoScroll : true,
			trackMouseOver : true,
			height : _this.maxHeight,
			lines : true,
			singleExpand : true,
			root : new Ext.tree.AsyncTreeNode({
				id : _this.rootId,
				text : _this.rootText,
				leaf : false,
				border : false,
				draggable : false,
				singleClickExpand : false,
				hide : true
			}),
			loader : new Ext.tree.TreeLoader({
				dataUrl : _this.url
			})
		});
		this.tree.on('click', function(node) {
			if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') {
				// if (node.parentNode && node.parentNode.attributes.id != '000000') {
				var dispText = node.text;
				var code = node.id;
				while (node.parentNode && node.parentNode.attributes.id != '000000') {
					if (node.parentNode.text != dispText) {
						dispText = node.parentNode.text + dispText;
					}
					node = node.parentNode;
				}
				_this.setHiddenValue(code, dispText);
				_this.collapse();
			}
		});
		this.on('expand', function() {
			this.tree.render(tplRandomId);
		});
		Ext.ux.TreeCombo.superclass.initComponent.call(this);
	}
})
Ext.reg("treecombo", Ext.ux.TreeCombo);

 

 使用示例：

 

	{
		xtype : 'treecombo',
		name : 'areaName',
		tplId : 'tree_tpl',
		rootVisible : true,
		rootText : '全国',
		url : 'loadArea',
		fieldLabel : '地区',
		maxHeight : 300,
		value : '全国',
		hiddenValue : '000000',
		anchor : '95%'
	}

 

不过通过formPanel.getForm().getValues()是获取不到treecombo的值的，需要自己手工调用

 

var treeValue = treeCombo.getHiddenValue();
treeCombo是上面控件的实例

然后通过Ext.apply(formJSON,{areaName:treeValue})对用formJSON中的显示值进行替换

http://raywithu.iteye.com/admin/blogs/1139509

评论

2 楼 raywithu 2013-09-23  

鸭子听雷公 写道

想看看到底是怎么实现的

上面的代码是齐全的。

1 楼 鸭子听雷公 2013-09-06  

想看看到底是怎么实现的