在做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
原文:http://www.oecp.cn/hi/yongtree/blog/2300