extjs4.1中combobox的联动

这里combobox的联动说两种情况，一种是直接在form表单中，两个combobox的联动，这个比较简单些，另一种情况的联动是在gridpanel表中，这个稍微有点复杂，但原理都是一样的，即：联动的一个combobox发生改变，根据改变的值，另一个联动的combobox获取新的值。先看下demo的效果：

选择省份“河南省”，市选择为“郑州，洛阳，周口”

选择“河北省”，市选择为：

同样的在gridpanel表格中情况相同

1.form表单中的联动

直接看代码吧，比较简单，又几点需要注意的，在注释里面都写好了

model的定义

 1    function defineModel() {
 2 
 3             Ext.define("commonModel", {
 4                 extend: "Ext.data.Model",
 5                 fields: [{
 6                     name: "id", type: "string"
 7                 }, {
 8                     name: "name", type: "string"
 9                 }, {
10                     name: "parentid", type: "string"
11                 }]
12             });
13 
14             Ext.define("gridModel", {
15                 extend: "Ext.data.Model",
16                 fields: [{
17                     name: "username", type: "string"
18                 }, {
19                     name: "province", type: "string"
20                 }, {
21                     name: "city", type: "string"
22                 }]
23             });
24         }
View Code

数据源的定义

 1   var provinceStore = Ext.create("Ext.data.Store", {
 2                 model: "commonModel",
 3                 autoLoad: true,
 4                 proxy: {
 5                     type: "ajax",
 6                     url: "../../Data/province.js",
 7                     reader: {
 8                         type: "json",
 9                         root: "data"
10                     }
11                 }
12             });
13 
14             var cityStore = Ext.create("Ext.data.Store", {
15                 model: "commonModel",
16                 autoLoad: true,
17                 proxy: {
18                     type: "ajax",
19                     url: "../../Data/city.js",
20                     reader: {
21                         type: "json",
22                         root: "data"
23                     }
24                 }
25             });
View Code

数据源文件是单独的js文件，下面的是省的js数据源

1 { 
2 success:true,
3 data:[{
4     id:"1",name:"河南省"
5 },{
6    id:"2",name:"河北省"
7 }] 
8 }
View Code

市的数据源js文件

 1 { 
 2 success:true,
 3 data:[{
 4 id:"1",name:"郑州",parentid:"1"
 5 },{
 6 id:"2",name:"洛阳",parentid:"1"
 7 },{
 8 id:"3",name:"周口",parentid:"1"
 9 },{
10 id:"4",name:"石家庄",parentid:"2"
11 },{
12 id:"5",name:"合肥",parentid:"2"
13 },{
14 id:"6",name:"邯郸",parentid:"2"
15 }]
16 }
View Code

combobox定义及事件

 1   var provice = Ext.create("Ext.form.ComboBox", {
 2                 id: "cmbProvice",
 3                 queryModel: "local",
 4                 displayField: "name",
 5                 valueField: "id",
 6                 store: provinceStore,
 7                 fieldLabel: "省",
 8                 width: 200,
 9                 labelWidth: 40,
10                 labelAlign: "right",
11                 listeners: {
12                     change: function (field, newValue, oldValue, op) {
13                         //当下拉框选择改变的时候，也就是原值不等于新值时
14                         if (newValue != oldValue) {
15                             //清空原来的下拉框
16                             city.clearValue();
17                             //过滤数据源
18                             cityStore.clearFilter();
19                             cityStore.filterBy(function (item) {
20                                 return item.get("parentid") == newValue;
21                             });
22                             //绑定数据源
23                             city.bindStore(cityStore);
24                         }
25                     }
26                 }
27             });           
28 
29             var city = Ext.create("Ext.form.ComboBox", {
30                 xtype: "combobox",
31                 id: "cmbCity",
32                 lastQuery: '',
33                 queryModel: "local",
34                 displayField: "name",
35                 valueField: "id",
36                 fieldLabel: "市",
37                 width: 200,
38                 labelWidth: 40,
39                 labelAlign: "right"
40             });
View Code

2.grid中的combobox联动

需要注意几点：

（1）绑定之后省市的名称显示，需要一个事件来获得

（2）最开始绑定之后，市的初始化过滤需要在gridpanel的cellEditing中

（3）过滤后，别忘了把该行的市字段清空或设置为默认新的字段值

看下代码

这个是grid的数据源定义

 1  var gridStore = Ext.create("Ext.data.Store", {
 2                 model: "gridModel",
 3                 autoLoad: true,
 4                 proxy: {
 5                     type: "ajax",
 6                     url: "../../Data/userdata.js",
 7                     reader: {
 8                         type: "json",
 9                         root: "data"
10                     }
11                 }
12             });
View Code

数据源也是一个单独的js文件

1 { 
2 success:true,
3 data:[{
4 username:"李明",province:"1",city:"1"
5 },{
6 username:"王飞",province:"2",city:"6"
7 }]
8 }
View Code

gridpanel的定义

 1   var grid = Ext.create("Ext.grid.Panel", {
 2                 title: "grid中的combobox联动",
 3                 columnLines: true,
 4                 border: false,
 5                 viewConfig: { stripeRows: true },
 6                 store: gridStore,
 7                 columns: [Ext.create("Ext.grid.RowNumberer")
 8             , {
 9                 text: "姓名",
10                 dataIndex: "username",
11                 width: 80,
12                 editor: {
13                     xtype: "textfield"
14                 }
15             }, {
16                 text: "地址信息",
17                 columns: [{
18                     text: "省",
19                     dataIndex: "province",
20                     width: 80,
21                     renderer: function (value) {
22                         return getTextById(provinceStore, value);
23                     },
24                     editor: {
25                         xtype: "combobox",
26                         id: "gridProvince",
27                         store: provinceStore,
28                         lastQuery: '',
29                         queryModel: "local",
30                         displayField: "name",
31                         valueField: "id",
32                         listeners: {
33                             change: function (filed, newValue, oldValue, op) {
34                                 if (newValue != oldValue) {
35                                     //获得选择的编辑行
36                                     var selected = grid.getView().getSelectionModel().getSelection()[0];
37                                     //设置改行的city列为空
38                                     selected.set("city", "");
39                                     //找到该列的控件
40                                     var cmbCity = Ext.getCmp("gridCity");
41                                     //过滤控件的数据源
42                                     cityStore.clearFilter();
43                                     cityStore.filterBy(function (item) {
44                                         return item.get("parentid") == newValue;
45                                     });
46                                 }
47                             }
48                         }
49                     }
50                 }, {
51                     text: "市",
52                     dataIndex: "city",
53                     width: 80,
54                     renderer: function (value) {
55                         return getTextById(cityStore, value);
56                     },
57                     editor: {
58                         xtype: "combobox",
59                         id: "gridCity",
60                         lastQuery: '',
61                         store: cityStore,
62                         queryModel: "local",
63                         displayField: "name",
64                         valueField: "id"
65                     }
66                 }]
67             }],
68                 plugins: Ext.create("Ext.grid.plugin.CellEditing", {
69                     clicksToEdit: 1,
70                     listeners: {
71                         beforeEdit: function (editor, e) {
72                             if (e.field == "city") {
73                                 //编辑之前，过滤下市的数据源
74                                 var provinceValue = e.record.get("province");
75                                 cityStore.clearFilter();
76                                 cityStore.filterBy(function (item) {
77                                     return item.get("parentid") == provinceValue;
78                                 });
79                             }
80                         }
81                     }
82                 }),
83                 selModel: {
84                     selType: "rowmodel"
85                 }
86             });
View Code

根据数据源和数据源某个字段值获得名称函数

1   function getTextById(store, id) {
2             var record = store.findRecord("id", id);
3             var text = "";
4             if (record != null) {
5                 text = record.get("name");
6             }
7             return text;
8         }
View Code

这样就完成了。

下面是真个页面的整体代码

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <link href="../../Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
  6     <script src="../../Ext/ext-all.js" type="text/javascript"></script>
  7     <script src="../../Ext/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
  8     <script type="text/javascript">
  9         Ext.Loader.setConfig({
 10             enabled: true
 11         });
 12         Ext.require([
 13     'Ext.form.*',
 14     'Ext.data.*'
 15     ]);
 16 
 17         Ext.onReady(function () {
 18 
 19             Ext.QuickTips.init();
 20 
 21             defineModel();
 22 
 23             var provinceStore = Ext.create("Ext.data.Store", {
 24                 model: "commonModel",
 25                 autoLoad: true,
 26                 proxy: {
 27                     type: "ajax",
 28                     url: "../../Data/province.js",
 29                     reader: {
 30                         type: "json",
 31                         root: "data"
 32                     }
 33                 }
 34             });
 35 
 36             var cityStore = Ext.create("Ext.data.Store", {
 37                 model: "commonModel",
 38                 autoLoad: true,
 39                 proxy: {
 40                     type: "ajax",
 41                     url: "../../Data/city.js",
 42                     reader: {
 43                         type: "json",
 44                         root: "data"
 45                     }
 46                 }
 47             });
 48 
 49             var provice = Ext.create("Ext.form.ComboBox", {
 50                 id: "cmbProvice",
 51                 queryModel: "local",
 52                 displayField: "name",
 53                 valueField: "id",
 54                 store: provinceStore,
 55                 fieldLabel: "省",
 56                 width: 200,
 57                 labelWidth: 40,
 58                 labelAlign: "right",
 59                 listeners: {
 60                     change: function (field, newValue, oldValue, op) {
 61                         //当下拉框选择改变的时候，也就是原值不等于新值时
 62                         if (newValue != oldValue) {
 63                             //清空原来的下拉框
 64                             city.clearValue();
 65                             //过滤数据源
 66                             cityStore.clearFilter();
 67                             cityStore.filterBy(function (item) {
 68                                 return item.get("parentid") == newValue;
 69                             });
 70                             //绑定数据源
 71                             city.bindStore(cityStore);
 72                         }
 73                     }
 74                 }
 75             });           
 76 
 77             var city = Ext.create("Ext.form.ComboBox", {
 78                 xtype: "combobox",
 79                 id: "cmbCity",
 80                 lastQuery: '',
 81                 queryModel: "local",
 82                 displayField: "name",
 83                 valueField: "id",
 84                 fieldLabel: "市",
 85                 width: 200,
 86                 labelWidth: 40,
 87                 labelAlign: "right"
 88             });
 89 
 90             var gridStore = Ext.create("Ext.data.Store", {
 91                 model: "gridModel",
 92                 autoLoad: true,
 93                 proxy: {
 94                     type: "ajax",
 95                     url: "../../Data/userdata.js",
 96                     reader: {
 97                         type: "json",
 98                         root: "data"
 99                     }
100                 }
101             });
102 
103             var grid = Ext.create("Ext.grid.Panel", {
104                 title: "grid中的combobox联动",
105                 columnLines: true,
106                 border: false,
107                 viewConfig: { stripeRows: true },
108                 store: gridStore,
109                 columns: [Ext.create("Ext.grid.RowNumberer")
110             , {
111                 text: "姓名",
112                 dataIndex: "username",
113                 width: 80,
114                 editor: {
115                     xtype: "textfield"
116                 }
117             }, {
118                 text: "地址信息",
119                 columns: [{
120                     text: "省",
121                     dataIndex: "province",
122                     width: 80,
123                     renderer: function (value) {
124                         return getTextById(provinceStore, value);
125                     },
126                     editor: {
127                         xtype: "combobox",
128                         id: "gridProvince",
129                         store: provinceStore,
130                         lastQuery: '',
131                         queryModel: "local",
132                         displayField: "name",
133                         valueField: "id",
134                         listeners: {
135                             change: function (filed, newValue, oldValue, op) {
136                                 if (newValue != oldValue) {
137                                     //获得选择的编辑行
138                                     var selected = grid.getView().getSelectionModel().getSelection()[0];
139                                     //设置改行的city列为空
140                                     selected.set("city", "");
141                                     //找到该列的控件
142                                     var cmbCity = Ext.getCmp("gridCity");
143                                     //过滤控件的数据源
144                                     cityStore.clearFilter();
145                                     cityStore.filterBy(function (item) {
146                                         return item.get("parentid") == newValue;
147                                     });
148                                 }
149                             }
150                         }
151                     }
152                 }, {
153                     text: "市",
154                     dataIndex: "city",
155                     width: 80,
156                     renderer: function (value) {
157                         return getTextById(cityStore, value);
158                     },
159                     editor: {
160                         xtype: "combobox",
161                         id: "gridCity",
162                         lastQuery: '',
163                         store: cityStore,
164                         queryModel: "local",
165                         displayField: "name",
166                         valueField: "id"
167                     }
168                 }]
169             }],
170                 plugins: Ext.create("Ext.grid.plugin.CellEditing", {
171                     clicksToEdit: 1,
172                     listeners: {
173                         beforeEdit: function (editor, e) {
174                             if (e.field == "city") {
175                                 //编辑之前，过滤下市的数据源
176                                 var provinceValue = e.record.get("province");
177                                 cityStore.clearFilter();
178                                 cityStore.filterBy(function (item) {
179                                     return item.get("parentid") == provinceValue;
180                                 });
181                             }
182                         }
183                     }
184                 }),
185                 selModel: {
186                     selType: "rowmodel"
187                 }
188             });
189 
190 
191             Ext.create("Ext.form.Panel", {
192                 title: "combobox联动的两种情况",
193                 width: 400,
194                 height: 500,
195                 renderTo: Ext.getBody(),
196                 bodyStyle: "padding-top:10px",
197                 items: [provice, city, grid]
198             });
199 
200 
201         });
202 
203         function getTextById(store, id) {
204             var record = store.findRecord("id", id);
205             var text = "";
206             if (record != null) {
207                 text = record.get("name");
208             }
209             return text;
210         }
211     </script>
212     <script type="text/javascript">
213         function defineModel() {
214 
215             Ext.define("commonModel", {
216                 extend: "Ext.data.Model",
217                 fields: [{
218                     name: "id", type: "string"
219                 }, {
220                     name: "name", type: "string"
221                 }, {
222                     name: "parentid", type: "string"
223                 }]
224             });
225 
226             Ext.define("gridModel", {
227                 extend: "Ext.data.Model",
228                 fields: [{
229                     name: "username", type: "string"
230                 }, {
231                     name: "province", type: "string"
232                 }, {
233                     name: "city", type: "string"
234                 }]
235             });
236         }
237     </script>
238 </head>
239 <body>
240 </body>
241 </html>
View Code

 

 

posted @ 2013-07-04 16:56  myt  阅读(3583)  评论(1)  编辑  收藏  举报