Extjs学习笔记(-):ComboBox联动

看到Extjs Example那些美轮美奂的界面,我也不禁心动了,也加入到学习Extjs的行列中来了,到园子里找了些朋友们的相关文档,囫囵吞枣的大都看了一遍,好像都还能理解,不过,经验告诉我,能看懂与能自己写,那根本就是两回事,况且这次还是大部分的手写javascript代码呀,所以还是不能光说不练,现在就动手:
我准备用ExtJS实现两个comeboBox(DropDownList)联动的效果,代码如下:
服务端代码:CategoryManage.aspx

GetCatWise.aspx
 1 using System;
 2 using System.Data;
 3 using System.Configuration;
 4 using System.Collections;
 5 using System.Web;
 6 using System.Web.Security;
 7 using System.Web.UI;
 8 using System.Web.UI.WebControls;
 9 using System.Web.UI.WebControls.WebParts;
10 using System.Web.UI.HtmlControls;
11 using RainbowSoft.BLL;
12 using RainbowSoft.Module;
13 using Newtonsoft.Json;
14 
15 public partial class Admin_GetCatWise : System.Web.UI.Page
16 {
17     protected void Page_Load(object sender, EventArgs e)
18     {
19         Response.Write(GetCatWise());
20     }
21 
22     private string GetCatWise()
23     {
24         CategoryWiseBLL cbl = CategoryWiseBLL.Instance;
25         return JavaScriptConvert.SerializeObject(cbl.GetCatWise());
26     }
27 }

还有一个通过传入的分类方式ID获取类别列表的页面,代码和上面的大同小异,我就不贴出来了,需要特别说明的就是,客户端需要返回的数据格式为JSON格式,JavaScriptConvert.SerializeObject(cbl.GetCatWise()),这句代码就是把服务器端返回的list对象序列化成JSON格式,返回的数据如下:

[{"ID":"91ad6568-9b13-42b3-8004-4140dae534ed","Name":"按印花工艺分类","Type":null,"PubTime":new Date(1195331771000)},{"ID":"9e5c6fa7-873e-4a6b-8f99-76f9c80bf1b4","Name":"按印花工艺分类","Type":null,"PubTime":new Date(1195335234000)},{"ID":"1185849f-f032-4e0f-9247-84acb9a766be","Name":"按印花工艺分类2","Type":"asdfasdf","PubTime":new Date(1196121239000)},{"ID":"724f4feb-faf8-47cb-a5ce-89e72530a74e","Name":"按印花工艺分类2","Type":null,"PubTime":new Date(1195335316000)},{"ID":"ec22aa35-d5c7-4089-bf35-8bf5f6787c06","Name":"按印花工艺分类","Type":null,"PubTime":new Date(1195333503000)},{"ID":"36814f7c-8c44-49e9-82e9-c5bc8d1be3e7","Name":"按印花工艺分类2","Type":null,"PubTime":new Date(1196118357000)}]

接下来就是核心的js代码了:

  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:'../admin/GetCatWise.aspx'
 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:'../admin/categorymanage.aspx'
 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 

在以上代码中,我在第一个comboBox中添加了一个select事件,在这个事件中,我先获取到第二个comboBox,然后给他添加一个Store,不过,以上代码在页面第一次加载的时候运行成功,当我再次选择第一个comboBox时,第二个comboBox不会有数据被加载,不知道什么原因,还请各位大虾指教.
对了,代码环境是vs2005