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 = "
" 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)

 

你可能感兴趣的:(Extjs)