帮助IT团队快速构建符合jt808协议部标的基于java技术的GPS和视频平台(2379423771@qq.com)

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

EXT JS 中的Ext.form.ComboBox 是基于输入框封装的widget,很灵活,代价是易用性非常差,特别是针对复杂的多级级联框。

调用者需要针对自己的需求做一下灵活的封装,来降低复杂度,让开发人员更容易调用,同时代让码复用的程度更高。

无论是省市乡镇,还是商品分类,无论是两级,还是多级,还是同级多个Child, API的行为都应当保持一致。

特点:
1.将数据源封装在内部,简化调用代码

2.一个下拉框允许设置同级多个child下拉框

3.允许设置默认值,并触发Select事件

4.下拉框中,允许设置特有的POST request 参数,在发送请求时,自动发送。

调用方式:


 1Ext.onReady(function(){
 2        //城市下级有商业区和行政区,两种同级类型,
 3        //后端通过 data2.html 及 Post 参数 type 和 parent来 输出不同的数据
 4        var myCmb1 = new MyComboBox({
 5             dataUrl:'data2.html',
 6             applyTo:'select1',   
 7             defaultValue:'2',
 8             params:{type:'city'}  //城市
 9            
10        }
);    
11
12        var myCmb2 = new MyComboBox({
13             dataUrl:'data2.html',
14             applyTo:'select2',   
15             params:{type:'business'}  //商业区
16            
17        }
);    
18
19        var myCmb3 = new MyComboBox({
20             dataUrl:'data2.html',
21             applyTo:'select3', 
22             params:{type:'district'}  //行政区
23            
24        }
);    
25
26        myCmb1.addChild(myCmb2).addChild(myCmb3);  
27
28        myCmb1.reload();
29
30}
);

代码:
 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>


20人合租600元/年

posted on 2008-11-23 11:34 Speed 阅读(4371) 评论(0)  编辑  收藏 所属分类: 框架设计前端设计Javascript WidgetEXT


只有注册用户登录后才能发表评论。


网站导航:
 

导航

留言簿(15)

随笔分类

值得一看的博客

积分与排名

最新评论

阅读排行榜