扩展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
