扩展EXTJS ComboBox为上拉选择树

2012-10-23

扩展EXTJS ComboBox为下拉选择树在做OECP平台的登陆页面时，需要选择相应的公司进行登陆，公司的选择是树形

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

热点排行

JavaScript

扩展EXTJS ComboBox为上拉选择树