这里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 }
数据源的定义
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 });
数据源文件是单独的js文件，下面的是省的js数据源
1 { 2 success:true, 3 data:[{ 4 id:"1",name:"河南省" 5 },{ 6 id:"2",name:"河北省" 7 }] 8 }
市的数据源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 }
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 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 200, 38 labelWidth: 40, 39 labelAlign: "right" 40 });
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 });
数据源也是一个单独的js文件
1 { 2 success:true, 3 data:[{ 4 username:"李明",province:"1",city:"1" 5 },{ 6 username:"王飞",province:"2",city:"6" 7 }] 8 }
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 80, 12 editor: { 13 xtype: "textfield" 14 } 15 }, { 16 text: "地址信息", 17 columns: [{ 18 text: "省", 19 dataIndex: "province", 20 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 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 });
根据数据源和数据源某个字段值获得名称函数
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 }
这样就完成了。
下面是真个页面的整体代码
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 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 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 80, 114 editor: { 115 xtype: "textfield" 116 } 117 }, { 118 text: "地址信息", 119 columns: [{ 120 text: "省", 121 dataIndex: "province", 122 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 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 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>