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格式,返回的数据如下:
接下来就是核心的js代码了:
对了,代码环境是vs2005
我准备用ExtJS实现两个comeboBox(DropDownList)联动的效果,代码如下:
服务端代码:CategoryManage.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
"
:
"
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不会有数据被加载,不知道什么原因,还请各位大虾指教.
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
对了,代码环境是vs2005