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

评论

1 楼 成溪先生 2010-04-15  

Ext.getCmp('comParent');
获取不到