ExtJS中的面向对象设计,组件化编程思想
1
/*
2
* @author: Lilf
3 * Description: ExtJS中的面向对象设计,组件化变成思想
4
*/
5/***************************扩展VTypes类，增加年龄的验证****************************/
6Ext.apply(Ext.form.VTypes, {
7
"age": function(_v){
8 if (/^\d+$/.test(_v)) {
9 var intExp = parseInt(_v);
10 if (intExp < 200)
11 return true;
12
}
13 return false;
14 },
15 ageText: "请输入正确的年龄格式，如：23"
16});
17/***************************继承自FormPanel的表单组件,用来构件Window***************************/
18PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
19 constructor: function(){
20 PersonInfoFormPanel.superclass.constructor.apply(this, [{
21 baseCls: "x-plain",
22 buttonAlign: "right",
23 labelWidth: 30,
24 defaultType: "textfield",
25 defaults: {
26 anchor: "95%",
27 labelStyle: "text-align:right"
28 },
29 items: [{
30 fieldLabel: "姓名",
31 name: "name"
32 }, {
33 fieldLabel: "年龄",
34 name: "age",
35 vtype: "age"//验证年龄（通过vtype类型来验证）
36 }, {
37 xtype: "combo",
38 mode: "local",//本地数据
39 readOnly: true,
40 fieldLabel: "性别",
41 displayField: "sex",//显示下拉框的内容
42 triggerAction: "all",//在选择时，显示所有的项
43 value: "男",//默认值
44 store: new Ext.data.SimpleStore({
45 fields: ["sex"],
46 data: [["男"], ["女"]]
47 }),
48 name: "sex"//绑定字段
49 }]
50
51
52 }])
53 },
54 //---以下为PersonInfoFormPanel类对外提供的方法---
55 getValues: function(){
56 if (this.getForm().isValid())
57 return new Ext.data.Record(this.getForm().getValues());
58 else
59 throw new Error("验证没有通过");//自定义异常
60 },
61 setValues: function(_r){
62 this.getForm().loadRecord(_r);
63 },
64 reset: function(){
65 this.getForm().reset();
66 }
67
68
69});
70/*************继承自Window的基类,insertWindow与updateWindow都由此继承****************/
71baseWindow = Ext.extend(Ext.Window, {
72 form: null,
73 constructor: function(){
74 this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
75 baseWindow.superclass.constructor.apply(this, [{
76 plain: true,
77 width: 350,
78 //title: "新增人员",
79 modal: true,
80 resizable: false,
81 closeAction: "hide",
82 defaults: {
83 style: "padding:5px"
84 },
85 items: this.form,
86 buttons: [{
87 text: "确 定",
88 handler: this.onSubmitClick,//提交事件调用
89 scope: this
90 }, {
91 text: "取 消",
92 handler: this.onCancelClick,//取消事件调用
93 scope: this
94
95 }]
96 }]);
97 //给insertWindow对象添加事件（事件冒泡）
98 this.addEvents("submit");
99 },
100 //提交事件处理函数
101 onSubmitClick: function(){
102 try {
103 //发布事件
104 this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
105 this.close();
106
107 }
108 catch (_err) {
109 Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
110 }
111 },
112 //取消事件处理函数
113 onCancelClick: function(){
114 this.close();
115 },
116 //重置与隐藏事件处理函数
117 close: function(){
118 this.form.reset();
119 this.hide();
120 }
121
122});
123/******************insertWindow类****************************/
124insertWindow = Ext.extend(baseWindow, {
125 title: "新增人员"
126});
127/****************updateWindow类******************************/
128updateWindow = Ext.extend(baseWindow, {
129 title: "修改人员",
130 load: function(_r){
131 this.form.setValues(_r);
132 }
133});
134/*******根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************
135 * ExtJs自定义PersonListGridPanel类
136 * 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],
137 * 并override了该类的构造函�hu数
138 * 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]
139 * 该类实现了如何对外部公布一个事�件
140 * 在构造函数中添加一个事件[this.addEvents("事件名称"）]
141 * 然后使用this.fireEvent("事件名称",参数）来发布此事�件
142 * 最后在客户端调用的时候来订阅该事�jian件
143 */
144PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
145 _window: null,
146 _updateWin: null,
147 constructor: function(_url){
148 this._window = new insertWindow();//insertWindow对象引用
149 this._updateWin = new updateWindow();//updateWindow对象引用
150 PersonListGridPanel.superclass.constructor.apply(this, [{
151 renderTo: Ext.getBody(),
152 width: 550,
153 height: 200,
154 frame: true,
155 layout: "form",
156 //工具栏
157 tbar: [{
158 text: "add",
159 handler: function(){
160 this._window.show();
161 },
162 scope: this
163 }, "-", {
164 text: "update",
165 handler: function(){
166 this._updateWin.show();
167 try {
168 this._updateWin.load(this.getSelected());
169 }
170
171
172 catch (_err) {
173 Ext.Msg.alert("系统提示", _err.description);
174 this._updateWin.close();
175 }
176 },
177 scope: this
178 }, "-", {
179 text: "delete",
180 handler: this.onRemovePerson,
181 scope: this
182 }],
183 enableColumnMove: false,
184 //列模板
185 columns: [{
186 header: "Name",
187 menuDisabled: true,
188 dataIndex: "name"
189 }, {
190 header: "Age",
191 menuDisabled: true,
192 dataIndex: "age"
193 }, {
194 header: "Sex",
195 menuDisabled: true,
196 dataIndex: "sex"
197 }],
198 //数据源
199 store: new Ext.data.JsonStore({
200 autoLoad: true,
201 url: _url,
202 fields: ["name", "age", "sex"]
203 }),
204 //选中模板
205 selModel: new Ext.grid.RowSelectionModel({
206 singleSelect: true,
207 listeners: {
208 "rowselect": {
209 fn: this.onRowSelected,
210 scope: this
211 }
212 }
213 })
214
215 }]);
216 //添加事件
217 this.addEvents("rowselect");
218 //事件订阅
219 this._window.on("submit", this.onInsertWinSubmit, this);
220 this._updateWin.on("submit", this.onUpdateWinSubmit, this);
221 },
222 //----- 以下为自定义方法---------
223 //获得选中的记录
224 getSelected: function(){
225 var _sm = this.getSelectionModel();
226 if (_sm.getCount() == 0)
227 throw new Error("你没有选中任何记录,请选择一条记录后重试
");
228 return _sm.getSelected();
229 },
230 //插入一条记录
231 insert: function(_r){
232 this.getStore().add(_r);
233 },
234 //更新选中的记录
235 update: function(_r){
236 try {
237 var _rs = this.getSelected();
238 var _data = _rs.data;
239 for (var _i in _data) {
240 _rs.set(_i, _r.get(_i));
241 };
242 _rs.commit();
243 }
244 catch (_err) {
245
246 }
247
248 },
249 //删除选中的记录
250 remove: function(){
251 try {
252 var _rs = this.getSelected();
253 Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
254 if (_btn == "yes")
255 this.getStore().remove(_rs);
256 }, this);
257 }
258 catch (_err) {
259 Ext.Msg.alert("系统提示", _err.description);
260 }
261 },
262 //-------以下为自定义事件处理函数------------
263 //添加事件
264 onInsertWinSubmit: function(_win, _r){
265 this.insert(_r);
266 },
267 //修改事件
268 onUpdateWinSubmit: function(_win, _r){
269 this.update(_r);
270 },
271 //删除事件
272 onRemovePerson: function(){
273 this.remove();
274 },
275 //选中事件
276 onRowSelected: function(_sel, _index, _r){
277 this.fireEvent("rowselect", _r);//发布事件
278 }
279
280})
281
282
283
284
285
/*
2
* @author: Lilf3
* Description: ExtJS中的面向对象设计,组件化变成思想4
*/5
/***************************扩展VTypes类，增加年龄的验证****************************/6
Ext.apply(Ext.form.VTypes, {7
"age": function(_v){
8
if (/^\d+$/.test(_v)) {9
var intExp = parseInt(_v);10
if (intExp < 200) 11
return true;12
}13
return false;14
},15
ageText: "请输入正确的年龄格式，如：23"16
});17
/***************************继承自FormPanel的表单组件,用来构件Window***************************/18
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {19
constructor: function(){20
PersonInfoFormPanel.superclass.constructor.apply(this, [{21
baseCls: "x-plain",22
buttonAlign: "right",23
labelWidth: 30,24
defaultType: "textfield",25
defaults: {26
anchor: "95%",27
labelStyle: "text-align:right"28
},29
items: [{30
fieldLabel: "姓名",31
name: "name"32
}, {33
fieldLabel: "年龄",34
name: "age",35
vtype: "age"//验证年龄（通过vtype类型来验证）36
}, {37
xtype: "combo",38
mode: "local",//本地数据39
readOnly: true,40
fieldLabel: "性别",41
displayField: "sex",//显示下拉框的内容42
triggerAction: "all",//在选择时，显示所有的项43
value: "男",//默认值44
store: new Ext.data.SimpleStore({45
fields: ["sex"],46
data: [["男"], ["女"]]47
}),48
name: "sex"//绑定字段49
}]50
51
52
}])53
},54
//---以下为PersonInfoFormPanel类对外提供的方法---55
getValues: function(){56
if (this.getForm().isValid()) 57
return new Ext.data.Record(this.getForm().getValues());58
else 59
throw new Error("验证没有通过");//自定义异常60
},61
setValues: function(_r){62
this.getForm().loadRecord(_r);63
},64
reset: function(){65
this.getForm().reset();66
}67
68
69
});70
/*************继承自Window的基类,insertWindow与updateWindow都由此继承****************/71
baseWindow = Ext.extend(Ext.Window, {72
form: null,73
constructor: function(){74
this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类75
baseWindow.superclass.constructor.apply(this, [{76
plain: true,77
width: 350,78
//title: "新增人员",79
modal: true,80
resizable: false,81
closeAction: "hide",82
defaults: {83
style: "padding:5px"84
},85
items: this.form,86
buttons: [{87
text: "确 定",88
handler: this.onSubmitClick,//提交事件调用89
scope: this90
}, {91
text: "取 消",92
handler: this.onCancelClick,//取消事件调用93
scope: this94
95
}]96
}]);97
//给insertWindow对象添加事件（事件冒泡）98
this.addEvents("submit");99
},100
//提交事件处理函数101
onSubmitClick: function(){102
try {103
//发布事件104
this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues105
this.close();106
107
} 108
catch (_err) {109
Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常110
}111
},112
//取消事件处理函数113
onCancelClick: function(){114
this.close();115
},116
//重置与隐藏事件处理函数117
close: function(){118
this.form.reset();119
this.hide();120
}121
122
});123
/******************insertWindow类****************************/124
insertWindow = Ext.extend(baseWindow, {125
title: "新增人员"126
});127
/****************updateWindow类******************************/128
updateWindow = Ext.extend(baseWindow, {129
title: "修改人员",130
load: function(_r){131
this.form.setValues(_r);132
}133
});134
/*******根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************135
* ExtJs自定义PersonListGridPanel类136
* 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],137
* 并override了该类的构造函�hu数138
* 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]139
* 该类实现了如何对外部公布一个事�件140
* 在构造函数中添加一个事件[this.addEvents("事件名称"）]141
* 然后使用this.fireEvent("事件名称",参数）来发布此事�件142
* 最后在客户端调用的时候来订阅该事�jian件143
*/144
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {145
_window: null,146
_updateWin: null,147
constructor: function(_url){148
this._window = new insertWindow();//insertWindow对象引用149
this._updateWin = new updateWindow();//updateWindow对象引用150
PersonListGridPanel.superclass.constructor.apply(this, [{151
renderTo: Ext.getBody(),152
width: 550,153
height: 200,154
frame: true,155
layout: "form",156
//工具栏157
tbar: [{158
text: "add",159
handler: function(){160
this._window.show();161
},162
scope: this163
}, "-", {164
text: "update",165
handler: function(){166
this._updateWin.show();167
try {168
this._updateWin.load(this.getSelected());169
} 170
171
172
catch (_err) {173
Ext.Msg.alert("系统提示", _err.description);174
this._updateWin.close();175
}176
},177
scope: this178
}, "-", {179
text: "delete",180
handler: this.onRemovePerson,181
scope: this182
}],183
enableColumnMove: false,184
//列模板185
columns: [{186
header: "Name",187
menuDisabled: true,188
dataIndex: "name"189
}, {190
header: "Age",191
menuDisabled: true,192
dataIndex: "age"193
}, {194
header: "Sex",195
menuDisabled: true,196
dataIndex: "sex"197
}],198
//数据源199
store: new Ext.data.JsonStore({200
autoLoad: true,201
url: _url,202
fields: ["name", "age", "sex"]203
}),204
//选中模板205
selModel: new Ext.grid.RowSelectionModel({206
singleSelect: true,207
listeners: {208
"rowselect": {209
fn: this.onRowSelected,210
scope: this211
}212
}213
})214
215
}]);216
//添加事件217
this.addEvents("rowselect");218
//事件订阅219
this._window.on("submit", this.onInsertWinSubmit, this);220
this._updateWin.on("submit", this.onUpdateWinSubmit, this);221
},222
//----- 以下为自定义方法---------223
//获得选中的记录224
getSelected: function(){225
var _sm = this.getSelectionModel();226
if (_sm.getCount() == 0) 227
throw new Error("你没有选中任何记录,请选择一条记录后重试");228
return _sm.getSelected();229
},230
//插入一条记录231
insert: function(_r){232
this.getStore().add(_r);233
},234
//更新选中的记录235
update: function(_r){236
try {237
var _rs = this.getSelected();238
var _data = _rs.data;239
for (var _i in _data) {240
_rs.set(_i, _r.get(_i));241
};242
_rs.commit();243
} 244
catch (_err) {245
246
}247
248
},249
//删除选中的记录250
remove: function(){251
try {252
var _rs = this.getSelected();253
Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){254
if (_btn == "yes") 255
this.getStore().remove(_rs);256
}, this);257
} 258
catch (_err) {259
Ext.Msg.alert("系统提示", _err.description);260
}261
},262
//-------以下为自定义事件处理函数------------263
//添加事件264
onInsertWinSubmit: function(_win, _r){265
this.insert(_r);266
},267
//修改事件268
onUpdateWinSubmit: function(_win, _r){269
this.update(_r);270
},271
//删除事件272
onRemovePerson: function(){273
this.remove();274
},275
//选中事件276
onRowSelected: function(_sel, _index, _r){277
this.fireEvent("rowselect", _r);//发布事件278
}279
280
})281
282
283
284
285
浙公网安备 33010602011771号