ComboBox联动

//java代码 public String findDeptById(int id) { try { this.depts=this.deptService.find(id); if(this.depts.size()>0){ } } catch (Exception e) { e.printStackTrace(); } JSONArray array = JSONArray.fromObject(this.depts); this.setJsonString("{success:true, list:" + array.toString() + "}"); System.out.println(getJsonString()); return SUCCESS; } //获取数据 var academyStore=new Ext.data.Store({ autoLoad:true, proxy:new Ext.data.HttpProxy({ url:'dept.action?id=1', method:'post' }), reader:new Ext.data.JsonReader({ id:'id', fields:["id","deptManager","deptName"] }), remoteSort:true }); var majorStore=new Ext.data.Store({ autoLoad:false, proxy:new Ext.data.HttpProxy({ url:'dept.action', method:'post' }), reader:new Ext.data.JsonReader({ id:'id', fields:["id","deptManager","deptName"] }), remoteSort:true }); var classStore=new Ext.data.Store({ autoLoad:false, proxy:new Ext.data.HttpProxy({ url:'dept.action', method:'post' }), reader:new Ext.data.JsonReader({ id:'id', fields:["id","deptManager","deptName"] }), remoteSort:true }); //comboBox items:[{ fieldLabel : '学院', xtype: 'combo', editable :false, lazyInit:false, emptyText :'请选择', displayField:'deptName', valueField :'id', model:'local', id:'academyCombo', name : 'stu.academy', store: academyStore, listeners:{select:function(){ try{ var majorCmp=Ext.getCmp('MajorCombo'); majorStore.reload({params:{id:this.value}}); //Ext.MessageBox.alert(this.value); } catch(ex){ Ext.MessageBox.alert(ex); } }}, triggerAction:'all', typeAhead :true, }, { fieldLabel : '专业', id:'majorCombo', name : 'stu.major', xtype: 'combo', editable :false, lazyInit:false, displayField:'deptName', valueField :'id', model:'local', store: majorStore, listeners:{select:function(){ try{ var classCmp=Ext.getCmp('classCombo'); classStore.reload({params:{id:this.value}}); //Ext.MessageBox.alert(this.value); } catch(ex){ Ext.MessageBox.alert(ex); } }}, triggerAction:'all', typeAhead :true, }, { fieldLabel : '班级', name : 'stu.classes', xtype: 'combo', editable :false, lazyInit:false, displayField:'deptName', valueField :'id', model:'local', store: classStore, triggerAction:'all', typeAhead :true, } ]

 

 

参考参考代码：

  1  //  JScript 文件
  2  Ext.onReady( function (){
  3       var  win;
  4       var  btnAdd = Ext.get( ' btnAdd ' );
  5      
  6       // 分类方式数据源
  7       var  store = new  Ext.data.Store({
  8          proxy: new  Ext.data.HttpProxy({
  9              url: '.acton '
 10          }),
 11          reader: new  Ext.data.JsonReader({
 12              id: ' ID ' ,
 13              fields:[ ' ID ' , ' Name ' ]
 14          }),
 15          remoteSort: true
 16      });
 17    
 32       // grid 数据源
 33       var  gridstore = new  Ext.data.GroupingStore({
 34          proxy: new  Ext.data.HttpProxy({
 35              url: '.action '
 36          }),
 37          reader: new  Ext.data.JsonReader({
 38              id: ' ID ' ,
 39              fields:[ ' ID ' , ' CategoryName ' , ' Code ' ,{name: ' PicCount ' ,type: ' int ' },{name: ' CCount ' ,type: ' int ' },{name: ' IsDefault ' ,type: ' string ' },{name: ' Name ' ,type: ' string ' ,mapping: ' CatWise.Name ' }]
 40          }),
 41          remoteSort: true ,
 42          groupField: ' Name '
 43      });
 44      gridstore.setDefaultSort( ' PubTime ' ,  ' desc ' );

 49       function  readerDefault(value,p,r){
 50           return  r.data.IsDefault ?   ' 是 ' : ' 否 ' ;
 51      }
 52      
 53       var  nm  =   new  Ext.grid.RowNumberer();
 54       var  sm  =   new  Ext.grid.CheckboxSelectionModel();
 55       var  cm  =   new  Ext.grid.ColumnModel([nm,sm,{
 56             id:  ' ID ' ,  //  id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
 57             header:  " 类别编号 " ,
 58             dataIndex:  ' Code ' ,
 59             width:  10
 61          },{
 62             header:  " 类别名称 " ,
 63             dataIndex:  ' CategoryName ' ,
 64             width:  100 ,
 65             hidden:  false
 66          },{
 67             header:  " 图片数 " ,
 68             dataIndex:  ' PicCount ' ,
 69             width:  70 ,
 70             align:  ' right '
 71          },{
 72             header:  " 子类数 " ,
 73             dataIndex:  ' CCount ' ,
 74             width:  70 ,
 75             align:  ' right '
 76          },{
 77             header:  " 分类方式 " ,
 78             dataIndex:  ' Name ' ,
 79             width:  140 ,
 80             align:  ' center '
 81          },{
 82              header: " 是否默认 " ,
 83              dataIndex: ' IsDefault ' ,
 84              width: 70 ,
 85              align: ' center ' ,
 86              renderer:readerDefault
 87          }]);
 88 
 89       //  by default columns are sortable
 90      cm.defaultSortable  =   true ;
 91      
 92      
 93       var  grid = new  Ext.grid.GridPanel({
 94          el: ' topic-grid ' ,
 95          width: 600 ,
 96          height: 400 ,
 97          title: ' 类别管理 ' ,
 98          store:gridstore,
 99          cm:cm,
100          sm:sm,
101          iconCls:  ' icon-grid ' ,
102          collapsible:  true ,
103          animCollapse:  false ,
104           // trackMouseOver:false,
105           // sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
106          loadMask:  true ,
107          stripeRows:  true ,
108          autoExpandColumn:  ' ID ' ,
109          viewConfig: {
110              forceFit: true ,
111               // enableRowBody:true,
112              showPreview: true ,
113              getRowClass :  function (record, rowIndex, p, store){
114                   if ( this .showPreview){
115                      p.body  =   ' <p> ' + record.data.ID + ' </p> ' ;
116                       return   ' x-grid3-row-expanded ' ;
117                  }
118                   return   ' x-grid3-row-collapsed ' ;
119              }
120          },
121          
122          view:  new  Ext.grid.GroupingView({
123              groupTextTpl:  ' {text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]}) '
124          }),
125          
126          tbar:[{
127              id: ' btnAdd ' ,
128              text: ' 新增 ' ,
129              tooltip: ' 新增 ' ,
130              iconCls: ' add ' ,
131              handler: showAddPanel
132          },  ' - ' , {
133              text: ' 查询 ' ,
134              tooltip: ' 查询 ' ,
135              iconCls: ' search '
136          },  ' - ' , {
137              text: ' 批量删除 ' ,
138              tooltip: ' 删除 ' ,
139              iconCls: ' remove '
141         }]
142      });
143      
144      grid.render();
145      gridstore.load();
146      grid.getSelectionModel().selectFirstRow();
147      
148       var  form = new  Ext.form.FormPanel({
149          labelWidth: 55 ,
150          url: ' save-form.php ' ,
151          bodyStyle: ' padding:5px 5px 0 ' ,
152          frame: true ,
153          items:[{
154              layout: ' column ' ,
155              items:[{
156                  columnWidth:. 78 ,
157                  layout: ' form ' ,
158                  items:[{
159                      fieldLabel: ' 类别编号 ' ,
160                      xtype: ' textfield ' ,
161                      name: ' txtCode ' ,
162                      id: ' txtCode ' ,
163                      anchor: ' 98% '
164                       // disabled:true
165                  }]
166              },{
167                  columnWidth:. 22 ,
168                  layout: ' form ' ,
169                  items:[{
170                      hideLabel:  true ,
171                      boxLabel : ' 自动生成编号 ' ,
172                      xtype: ' checkbox ' ,
173                      name: ' labCode ' ,
174                      id: ' labCode ' ,
175                      anchor: ' 100% ' ,
176                      checked: true ,
177                      listeners:{check: function (){
178                           var  txtCode = Ext.getCmp( ' txtCode ' );
179                           if ( this .checked){
180                              txtCode.disable();
181                          } else {
182                              txtCode.enable();
183                          }
184                      }}
185                  }]
186              }]
187          },{
188              fieldLabel: ' 类别名称 ' ,
189              xtype: ' textfield ' ,
190              name: ' labName ' ,
191              anchor: ' 100% '
192          },{
193              fieldLabel: ' 分类方式 ' ,
194              xtype: ' combo ' ,
195              editable : false ,
196              name: ' labCatWise ' ,
197              id: ' cmbCatWise ' ,
198              emptyText : ' 请选择 ' ,
199              displayField: ' Name ' ,
200              valueField : ' ID ' ,
201              mode: ' remote ' ,
202              store:store,
203              listeners:{select: function (){
204                  var parent=Ext.getCmp('comParent');
205                 var store =new Ext.data.Store({
206                     baseParams:{wiseID:this.value},
207                     proxy:new Ext.data.HttpProxy({
208                         url:'../admin/GetCategory.aspx',
209                         method:'post'
210                     }),
211                     reader:new Ext.data.JsonReader({
212                         id:'ID',
213                         fields:['ID','CategoryName']
214                     }),
215                     remote:true
216                 });
217                 parent.store=store; 
218                 parent.displayField='CategoryName';
219                 parent.valueField ='ID'; 
220                  
221                  
222  //                     var conn=new Ext.data.Connection();
223  //                     conn.request({
224  //                         url:'../admin/GetCategory.aspx',
225  //                         method:'post',
226  //                         params:{wiseID:this.value},
227  //                         scope: this ,
228  //                         callback:function(options,success, response){ 
229  //                             if(success){   
230  //                                 var cat = Ext.util.JSON.decode(response.responseText);   
231  //                                 //Ext.MessageBox.alert(cat[0].CategoryName);
232  //                                 //catstore.data=cat;
233  //                                 var parent=Ext.getCmp('comParent');
234  //                                 parent.store=new Ext.data.Store({
235  //                                     data:response.responseText,
236  //                                     reader:new Ext.data.JsonReader({
237  //                                         id:'ID',
238  //                                         fields:['ID','CategoryName']
239  //                                     })
240  //                                 }); 
241  //                                 parent.displayField='CategoryName';
242  //                                 parent.valueField ='ID';   
243  //                             }    
244  //                             else     
245  //                                 {Ext.MessageBox.alert("提示","所选记录删除失败！");}     
246  //                         }  
247  //                     });
248              }},
249              triggerAction: ' all ' ,
250              typeAhead : true ,
251              anchor: ' 100% '
252              
253          }, {
254              fieldLabel: ' 所属父类 ' ,
255              xtype: ' combo ' ,
256              editable : false ,
257              emptyText : ' 请选择 ' ,
258              id: ' comParent ' ,
259              loadingText : ' 正在请求数据,请稍后 ' ,
260              triggerAction: ' all ' ,
261              name: ' labParent ' ,
262              anchor: ' 100% '
263          },{
264              xtype:  ' textarea ' ,
265              hideLabel:  true ,
266              name:  ' msg ' ,
267              anchor:  ' 100% -110 '    //  anchor width by percentage and height by raw adjustment
268          }]
269      });
270 
271      
272       function  showAddPanel(){
273           if ( ! win)
274          {
275              win = new  Ext.Window({
276                  el: ' hello-win ' ,
277                  width: 500 ,
278                  height: 300 ,
279                  minWidth:  300 ,
280                  minHeight:  200 ,
281                  layout: ' fit ' ,
282                  closeAction: ' hide ' ,
283                  plain: true ,
284                  bodyStyle: ' padding:5px; ' ,
285                  buttonAlign: ' center ' ,
286                  title: ' 添加类别 ' ,
287                  items:form,
288                  
289                  buttons:[{
290                      text: ' 提交 ' ,
291                      handler: function (){
292                          Ext.MessageBox.alert( ' Warning! ' ,  ' Incorrect Login ' );
293                      }
294                  },{
295                      text: ' 取消 ' ,
296                      handler: function (){
297                          win.hide();
298                      }
299                  }]
300              });
301          }
302          win.show( this );
303      }
304  });
305 
306