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"/>
3. <input id="cbid" class="x-form-text x-form-field x-form-focus" type="text" autocomplete="off" size="24" readonly="" style="width: 55px;"/>
4. <img id="ext-gen280" class="x-form-trigger x-form-arrow-trigger" src="http://www.yibenzhang.com/JSFW/ext/resources/images/default/s.gif"/>
5. </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. });
20. //省份combo
21. Wayfoon.Province=function(id){
22.     var comboProvince=({
23.         xtype : 'combo',
24.         //name : 'combo-province',
25.         readOnly : true,
26.         triggerAction : 'all',
27.         allowBlank : true,
28.         width : 60,
29.         store : Wayfoon.MMS.TypeStore4,
30.         value : '',
31.         //pageSize:10,
32.         //typeAhead: true,
33.         //resizable : true,
34.         hiddenName : 'hComboProv',
35.         displayField : 'text',
36.         valueField : 'value',
37.         mode : 'local',
38.         emptyText : '选择省份',
39.         listeners:{
40.             select:{
41.                 fn:function(combo,record,index) {
42.                     var store;
43.                     if(record.get('value')=='广东')
44.                     {
45.                         store = Wayfoon.MMS.TypeStore5;
46.                     }
47.                     else if(record.get('value')=='广西')
48.                     {
49.                         store = Wayfoon.MMS.TypeStore51;
50.                     }
51.                     Ext.getCmp('city'+id).clearValue();
52.                     Ext.getCmp('city'+id).store = store;
53.                     if(Ext.getCmp('city'+id).view){
54.                         Ext.getCmp('city'+id).view.setStore(store);
55.                     }
56.                     Ext.getCmp('city'+id).enable();
57.                 
58.                }
59.             }
60.         }
61.     });
62.  return comboProvince;
63. }
64. //城市combo
65. Wayfoon.City=function(id){
66.     var comboCity=(
67.     {
68.         id:'city'+id,
69.         xtype : 'combo',
70.         readOnly : true,
71.         triggerAction : 'all',
72.         allowBlank : true,
73.         width : 60,
74.         store :  new Ext.data.Store(),//Wayfoon.MMS.TypeStore5,
75.         value : '',
76.         hiddenName : 'hComboCity',
77.         displayField : 'text',
78.         valueField : 'value',
79.         mode : 'local',
80.         emptyText : '选择城市' 
81.      });
82.     return comboCity;
83. }