Javascript Widget之二 基于EXT JS 的可重用的无限级联下拉框

代码：

1MyComboBox = Ext.extend(Ext.form.ComboBox, {
2　　　　　　　　valueField: 'id',　　　
3　　　　　　　　displayField: 'label',
4　　　　　　　　emptyText:'请选择',//默认值
5　　　　　　　　mode:'local',
6　　　　　　　　triggerAction:'all',
7　　　　　　　　initComponent: function(){
8　　　　　　　　　 //在组件初始化期间调用的代码
9
10　　　　　　　　　 this.children = [];　　　　　　
11　　　　　　
12　　　　　　　　　　//调用父类构造函数（必须）
13　　　　　　　　　　MyComboBox.superclass.initComponent.apply(this, arguments);
14
15　　　　　　　　　　//**设置数据源**
16　　　　　　　　　　this.store = new Ext.data.Store({　
17　　　　　　　　　　　　 baseParams: this.params || {},　
18　　　　　　　　　　　　 proxy: new Ext.data.HttpProxy({　
19　　　　　　　　　　　　　　 url: this.dataUrl　
20　　　　　　　　　　　　 }),　
21　　　　　　　　　　　　 reader: new Ext.data.JsonReader({　
22　　　　　　　　　　　　　　 root: 'dms',　
23　　　　　　　　　　　　　　 id: 'id',
24　　　　　　　　　　　　　　 totalProperty: 'recordCount',
25　　　　　　　　　　　　　　 }, [　
26　　　　　　　　　　　　　　　　 {name: 'id', mapping: 'id'},　
27　　　　　　　　　　　　　　　　 {name: 'label', mapping: 'label'}　
28　　　　　　　　　　　　　　 ])　
29　　　　　　　　　　　　});
30　　　　　　　　},
31　　　　　　　　//设置默认值，并触发Select 事件
32　　　　　　　　setDefaultValue:function(v){
33　　　　　　　　　　this.setValue(v);
34
35　　　　　　　　　　this.fireEvent('select', this);
36　　　　　　　　},
37　　　　　　　　/**//** 向数据源添加request参数 */
38　　　　　　　　addParam:function(parameters){
39　　　　　　　　　　Ext.apply(this.store.baseParams, parameters);
40　　　　　　　　},
41　　　　　　　　
42　　　　　　　　listeners:{　　　　
43　　　　　　　　　 select : function(combo, record,index){　　　
44　　　　　　　　　　　Ext.each(this.children, function(child){
45　　　　　　　　　　　　　　　 //child.clearValue();
46　　　　　　　　　　　　　　　　//级联的子下拉框会多发送一个&parent=..的参数，后端据此可以做出判断如何加载数据
47　　　　　　　　　　　　　　　 child.addParam({parent:combo.value});　
48
49　　　　　　　　　　　　　　　 child.reload();
50
51　　　　　　　　　　　});　
52　　　　　　　　　 }　　　
53　　　　　　　 },　
54　　　　　　　 /**//** 添加下级级联的下拉框 */
55　　　　　　　 addChild:function(child){
56　　　　　　　　　 this.children.push(child);
57
58　　　　　　　　　 return this;
59　　　　　　　 },
60　　　　　　　 /**//** 重新加载数据源 */
61　　　　　　　 reload:function(){
62　　　　　　　　　if(this.store)
63　　　　　　　　　　　 this.store.load();　　
64　　　　　　　　　if(this.defaultValue){
65　　　　　　　　　　 this.setDefaultValue(this.defaultValue);
66　　　　　　　　　　 this.defaultValue = null;　 //默认值，只初始化一次
67　　　　　　　　　}
68
69
70　　　　　　　　　return this;
71　　　　　　　 }
72
73　　　　　　});

应用库：

1 link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

2　　link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-gray.css" />

3

4script src="../../js/ext-base.js">span style="COLOR: #800000">script>

5script src="../../js/ext-all-debug.js">span style="COLOR: #800000">script>