Extjs下拉树列表组合框实现

最新推荐文章于 2021-03-20 18:52:23 发布

最新推荐文章于 2021-03-20 18:52:23 发布 · 257 阅读

文章标签：

#extjs #下拉树列表组合框

Extjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用ExtJS实现的下拉树列表组件，该组件结合了树形结构与下拉列表的特点，适用于展示组织机构等层级数据。文章提供了具体的实现代码，包括如何配置请求地址、设置节点及响应点击事件等。

经常在用于显示组织机构的时候会使用下拉树列表组合框，在此给出本人的实现方式,直接上代码：

Ext.ux.TreeCombox = Ext.extend(Ext.form.ComboBox, {
	/**
	 * @cfg treeUrl {String}
	 * 树的请求地址
	 */
	/**
	 * 根节点
	 * @property root {TreeNode}
	 */
	store : new Ext.data.SimpleStore({
				fields : [],
				data : [[]]
			}),
	editable : false,
	mode : 'local',
	emptyText : "请选择",
	allowBlank : false,
	blankText : "必须输入!",
	triggerAction : 'all',
	maxHeight : 400,
	anchor : '95%',
	displayField : 'text',
	valueField : 'id',
	selectedClass : '',
	onSelect : Ext.emptyFn,
	initComponent : function() {
		this.addEvents(
			"nodeclick",
			"afterTreeExpand"
		)
		this.divId = Ext.id()
		this.tpl = "<tpl for='.'><div style='height:380px'><div id='"+this.divId+"'></div></div></tpl>"
		this.initTree();
		
		this.tree.on('click', function(node) {
//				alert("click")
//				this.selectByValue(node.text)
				this.setValue(node.text);
				this.fireEvent("nodeclick",this,node);
				this.collapse();
			},this)

		this.on('expand', function() {
					this.tree.render(this.divId);
					this.fireEvent("afterTreeExpand",this,this.tree)
					if(this.expandTree){
						this.tree.expandAll();
					}
				},this);

		Ext.ux.TreeCombox.superclass.initComponent.call(this);
	},
	initTree : function () {
		this.tree = new Ext.tree.TreePanel({
			height : 380,
			scope : this,
			autoScroll : true,
			split : true,
			rootVisible : false,
			root : this.root || {
				text : '根节点',
				draggable : false
			},

			loader :this.treeLoader || new Ext.tree.TreeLoader({
						url : this.treeUrl

					})
			});
	},
	getRootNode : function() {
		return this.tree.root;
	},
	getTree : function() {
		return this.tree;
	}
});
Ext.reg("comboxtree",Ext.ux.TreeCombox)