Extjs combox 树组合框自定义
/*** 韩飞* * @class TreeSelector* @extends Ext.form.ComboBox*/ TreeSelector = Ext.extend(Ext.form.ComboBox, { /** * 回调函数,用于传递选择的id，text属性 * * @type */ callback : Ext.emptyFn, store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), editable : false, mode : 'local', emptyText : "请选择部门", allowBlank : false, blankText : "必须输入!", triggerAction : 'all', maxHeight : 200, anchor : '95%', displayField : 'text', valueField : 'id', tpl : "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>", selectedClass : '', onSelect : Ext.emptyFn, /** * 根的名字 * * @type String */ rootText : '组织机构', /** * 树的请求地址 * * @type String */ treeUrl : 'system/organization/loadOrganizationTrees.action', tree : null, initComponent : function() { this.tree = new Ext.tree.TreePanel({ height : 200, scope : this, autoScroll : true, split : true, root : new Ext.tree.AsyncTreeNode({ expanded : true, id:'o', text : this.rootText }), loader : new Ext.tree.TreeLoader({ url : this.treeUrl }), rootVisible : true // , /* * listeners : { scope : this, 'click' : function(node) {// 单击事件 * if (node.id != null && node.id != '') { * * this.callback.call(this, node.id, node.text); * * this.collapse(); *} } } */ }); var c = this; /** * 点击选中节点并回调传值 */ this.tree.on('click', function(node) { if (node.id != null && node.id != '') { if (node.id != 'o') { c.callback.call(this, node.id, node.text); c.collapse(); }else{ Ext.Msg.alert("提示","此节点无效，请重新选择!") } } }) this.on('expand', function() { this.tree.render('tree'); this.tree.expandAll(); }); TreeSelector.superclass.initComponent.call(this); } })使用方法 new TreeSelector({callback:function(){ }})
页:
[1]