扩展EXTJS ComboBox为下拉选择树 标签: extjs combobox 扩展 在做OECP平台的登陆页面时,需要选择相应的公司进行登陆,公司的选择是树形结构的,而extjs的下拉combobox为列表结构,为了让页面操作更加简单,决定将下拉列表改造成下拉树。 在这里主要用到了Extjs的extend的语法,扩展比较简单,直接上代码吧。 js 代码 Ext.ns("OECP.ui"); /** * 下拉列表选择树 * <br> * 依赖EXTJS3版本 * @class OECP.ui.ComboBoxTree * @extends Ext.form.ComboBox * @author yongtree */ OECP.ui.ComboBoxTree = Ext.extend(Ext.form.ComboBox, { /** * 回调函数,用于传递选择的id,text属性 * * @type */ callback : Ext.emptyFn, store : new Ext.data.SimpleStore({ fields : [], data : [[]] }), editable : this.editable||false, mode : 'local', emptyText : this.emptyText||"请选择", allowBlank : this.allowBlank||true, blankText : this.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 : this.rootText||'root', /** * 树的请求地址 * * @type String */ treeUrl : this.treeUrl, 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 : '_oecp', text : this.rootText }), loader : new Ext.tree.TreeLoader({ url : this.treeUrl }), rootVisible : true }); var c = this; /** * 点击选中节点并回调传值 */ this.tree.on('click', function(node) { if (node.id != null && node.id != '') { if (node.id != '_oecp') { c.setValue(node.text); 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(); }); OECP.ui.ComboBoxTree.superclass.initComponent.call(this); } }) 在页面上如下使用: xhtml 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>ComboBoxTree.html</title> <link rel="stylesheet" type="text/css" href="../../extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="../../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../../extjs/ext-all.js"></script> <script type="text/javascript" src="../core/ComboBoxTree.js"></script> </head> <body> <div id="cbt"></div> </body> </html> <script type="text/javascript"> Ext.onReady(function() { new OECP.ui.ComboBoxTree({ renderTo:"cbt", treeUrl:"ComboBoxTree.json", editable:false, rootText:"选择公司", valueField:"com", displayField:"_com", callback:function(id,text){ alert(id); alert(text); //可以做更多的处理。 } }); }) </script> 附件中包含了该组件源代码和一个demo。 OECP平台正在研发之中,在第一个稳定版本发布的时候,将开放相关的API。 相关的API,可参见:http://prj.oecp.cn/projects/oecp-platform/wiki/OECPuiComboBoxTree