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