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.

2.
3.
4.
5.
6.
7.

可以看出一个下列选择 主要由三部分组成 两个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.
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;
64.
65. }
66.
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;
86.
87. }


原文地址：http://wayfoon.javaeye.com/blog/225858