Ext.form.ComboBox使用方法介绍和级联使用

Ext.form.ComboBox 属性详解（见注释）及使用方法
定义一个ComboBox：

 

1. Wayfoon.YearComb = new Ext.form.ComboBox({
2.     id:'cbid',
3.     name:'year',//name只是改下拉的名称
4.     hiddenName:'hyear',//提交到后台的input的name
5.     width : 80,
6.     store : Wayfoon.Year,//填充数据
7.     emptyText : '请选择',
8.     mode : 'local',//数据模式，local代表本地数据
9.     readOnly : true,//是否只读
10.     value : (new Date()).YEAR,//默认值,要设置为提交给后台的值，不要设置为显示文本
11.     triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all
12.     allowBlank : false,//不允许为空
13.     valueField : 'value',//值
14.     displayField : 'text',//显示文本
15.     editable: false,//是否允许输入
16.     forceSelection: true,//必须选择一个选项
17.     blankText:'请选择'//该项如果没有选择，则提示错误信息
18. });

注意：

id:'cbid',//作用不大，可以自动生成
    name:'year',//name只是改下拉的名称，几乎没有作用
    hiddenName:'hyear',//提交到后台的input的name，重要

使用firebug查看html代码， 以上代码生成html是

1. <div id="ext-gen279" class="x-form-field-wrap x-trigger-wrap-focus" style="width: 80px;">
2. <input id="hyear" type="hidden" name="hyear" value="01"/>
4. <input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/>
6. <img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
7. </div>

可以看出一个下列选择 主要由三部分组成 两个input 和一个img(下拉的箭头)。例外  name属性没有起到作用。

combobox中要用到的数据：可以改成从数据库中读取数据

1. Wayfoon.Year = new Ext.data.SimpleStore({
2.     fields : ['value', 'text'],
3.     data : [['2008', '2008'], ['2009', '2009']]
4. });

如果要下列框级联，在combox 里面加上

1. listeners:{
2.             select:{
3.                 fn:function(combo,record,index) {
4.                     var store;
5.                     if(record.get('value')=='广东')
6.                     {
7.                         store = Wayfoon.MMS.TypeStore5;
8.                     }
9.                     else if(record.get('value')=='广西')
10.                     {
11.                         store = Wayfoon.MMS.TypeStore51;
12.                     }
13.                     Ext.getCmp('city'+id).clearValue();
14.                     Ext.getCmp('city'+id).store = store;
15.                     if(Ext.getCmp('city'+id).view){
16.                         Ext.getCmp('city'+id).view.setStore(store);
17.                     }
18.                     Ext.getCmp('city'+id).enable();
19.                 
20.                }
21.             }
22.         }

比如省份和城市级联

 

1. //省份数据
2. Wayfoon.MMS.TypeStore4 = new Ext.data.SimpleStore({
3.     fields : ['value', 'text'],
4.     data : [['', '全部省份'],
5.         ['广东', '广东'], ['广西', '广西'], ['黑龙江', '黑龙江'],['吉林', '吉林'],['陕西', '陕西'],
6.         ['浙江', '浙江'],['江苏', '江苏'],['四川', '四川'],['湖北', '湖北'],['新疆', '新疆'],
7.         ['云南', '云南'],['安微', '安微'],['福建', '福建'],['江苏', '江苏'],['山东', '山东'],
8.         ['北京','北京']]
9. });
10. //城市数据1
11. Wayfoon.MMS.TypeStore5 = new Ext.data.SimpleStore({
12.     fields : ['value', 'text'],
13.     data : [['', '全部城市'], ['深圳市', '深圳市'], ['广州市', '广州市']]
14. });
15. //城市数据2
16. Wayfoon.MMS.TypeStore51 = new Ext.data.SimpleStore({
17.     fields : ['value', 'text'],
18.     data : [['', '全部城市'], ['桂林', '桂林'], ['山水', '山水']]
19. });
21. //省份combo
22. Wayfoon.Province=function(id){
23.     var comboProvince=({
24.         xtype : 'combo',
25.         //name : 'combo-province',
26.         readOnly : true,
27.         triggerAction : 'all',
28.         allowBlank : true,
29.         width : 60,
30.         store : Wayfoon.MMS.TypeStore4,
31.         value : '',
32.         //pageSize:10,
33.         //typeAhead: true,
34.         //resizable : true,
35.         hiddenName : 'hComboProv',
36.         displayField : 'text',
37.         valueField : 'value',
38.         mode : 'local',
39.         emptyText : '选择省份',
40.         listeners:{
41.             select:{
42.                 fn:function(combo,record,index) {
43.                     var store;
44.                     if(record.get('value')=='广东')
45.                     {
46.                         store = Wayfoon.MMS.TypeStore5;
47.                     }
48.                     else if(record.get('value')=='广西')
49.                     {
50.                         store = Wayfoon.MMS.TypeStore51;
51.                     }
52.                     Ext.getCmp('city'+id).clearValue();
53.                     Ext.getCmp('city'+id).store = store;
54.                     if(Ext.getCmp('city'+id).view){
55.                         Ext.getCmp('city'+id).view.setStore(store);
56.                     }
57.                     Ext.getCmp('city'+id).enable();
58.                 
59.                }
60.             }
61.         }
62.     });
63.  return comboProvince;
65. }
67. //城市combo
68. Wayfoon.City=function(id){
69.     var comboCity=(
70.     {
71.         id:'city'+id,
72.         xtype : 'combo',
73.         readOnly : true,
74.         triggerAction : 'all',
75.         allowBlank : true,
76.         width : 60,
77.         store :  new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
78.         value : '',
79.         hiddenName : 'hComboCity',
80.         displayField : 'text',
81.         valueField : 'value',
82.         mode : 'local',
83.         emptyText : '选择城市' 
84.      });
85.     return comboCity;
87. }