WEB开发网
开发学院网页设计JavaScript Javascript Widget之二 基于EXT JS 的可重用的无限... 阅读

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

 2010-09-14 13:29:49 来源:WEB开发网   
核心提示:EXT JS 中的Ext.form.ComboBox 是基于输入框封装的widget,很灵活,Javascript Widget之二 基于EXT JS 的可重用的无限级联下拉框,代价是易用性非常差,特别是针对复杂的多级级联框,自动发送,调用方式:1Ext.onReady(function(){2//城市下级有商业区和行

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});

1 2  下一页

Tags:Javascript Widget 基于

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接