Ext面向对象开发实践

这是自己在学习Ext过程中一个写的一个示例程序，仅为练习，功能并不全，现将其记录在我的博客中，希望可以和学习Ext的朋友一起分享。

 

示例程序简述：

这个Demo为了演示如将使用GridPanel显示数据，并为GridPanel添加工具条按钮，提供弹出式窗体新增数据。

 

使用到的Ext组件

这个Demo涉及到Ext中的GridPanel，FormPanel和Window三个组件。

 

效果图

 

 

现在开始讲解代码，首先看一下创建GridPanel的代码片段

1. //定义数据列表面板类
2. PersonListGridPanel=Ext.extend(Ext.grid.GridPanel,{
3. insertWin:null,
4. updateWin:null,
6. constructor:function(){
7. //添加自定义事件
8. this.addEvents("rowSelect");
10. this.insertWin=newInsertPersonInfoWindow();
11. this.insertWin.on("submit",this.onInsertWinSubmit,this);
13. this.updateWin=newUpdatePersonInfoWindow();
14. this.updateWin.on("submit",this.onUpdateWinSubmit,this);
16. PersonListGridPanel.superclass.constructor.call(this,{
17. renderTo:Ext.getBody(),
18. width:360,
19. height:300,
20. frame:true,
21. sm:newExt.grid.RowSelectionModel({
22. singleSelect:true,
23. listeners:{
24. "rowselect":{
25. fn:function(sm,rowIndex,r){
26. this.fireEvent("rowSelect",r);//触发自定义事件
27. },
28. scope:this
29. }
30. }
31. }),
32. store:newExt.data.JsonStore({
33. data:[{name:"李宗盛",age:28,sex:"男"},{name:"林忆莲",age:26,sex:"女"}],
34. fields:["name","sex","age"]
35. }),
36. draggable:false,
37. enableColumnMove:false,
38. title:"FirstGrid",
39. //iconCls:'icon-grid',
40. colModel:newExt.grid.ColumnModel([
41. {header:"StaffName",width:100,menuDisabled:true},
42. {header:"Age",width:100,sortable:true,dataIndex:"age",align:"right",tooltip:"这里是提示信息"},
43. {header:"Sex",width:100,sortable:true,dataIndex:"sex",align:"center"}
44. ]),
45. tbar:[{
46. text:"添加人员",
47. handler:function(){
48. //***************************************************
49. //如果没有重写InsertPersonInfoWindow的Close方法
50. //在调用之前需要检查其实例insertWin是否被释放
51. //使用示例：
52. //if(!this.insertWin){
53. //this.insertWin=newInsertPersonInfoWindow();
54. //}
55. //this.insertWin.show();
56. //***************************************************
57. this.insertWin.show();
58. },
59. scope:this
60. },"-",{
61. text:"修改人员",
62. handler:function(){
63. varr=this.getActiveRecord();
64. if(!r)return;
66. //一定要先调用Show方法，而后再调用Load方法，
67. //否则数据不会被呈现出来
68. this.updateWin.show();
69. this.updateWin.load(r);
70. },
71. scope:this
72. },"-",{
73. text:"删除人员",
74. handler:function(){
75. varr=this.getActiveRecord();
76. if(!r)return;
77. Ext.MessageBox.confirm("删除","删除当前人员信息？",function(btn){
78. if(btn=="yes"){
79. this.delRecord(r);
80. }
81. },this);
82. },
83. scope:this
84. }]
85. });
86. },
87. getActiveRecord:function(){
88. varsm=this.getSelectionModel();
89. //没有选中的记录时，是抛出异常还是返回null???????
90. return(sm.getCount()===0)?null:sm.getSelected();
91. },
92. insert:function(r){
93. this.getStore().add(r);
94. },
95. delRecord:function(r){
96. this.getStore().remove(r);
97. },
98. onInsertWinSubmit:function(win,r){
99. this.insert(r);
100. },
101. onUpdateWinSubmit:function(win,r){
102. alert('onUpdateWinSubmit');
103. }
104. });

数据维护面板代码

1. //定义数据维护面板，在后面定义的新增和修改窗体中都会使用到该面板
2. PersonInfoFormPanel=Ext.extend(Ext.form.FormPanel,{
3. constructor:function(){
4. PersonInfoFormPanel.superclass.constructor.call(this,{
5. //title:"PersonInfo",
6. frame:true,
7. width:360,
8. labelWidth:40,
9. defaultType:"textfield",
10. defaults:{anchor:"92%"},
11. items:[{
12. name:"name",//注意，这里使用name属性而不是id，因为PersonInfoFormPanel会被添加和插入两个窗体使用，使用id会有冲突，导致组件不能被正确显示
13. fieldLabel:"Name",
14. allowBlank:false,
15. emptyText:"请输入姓名",
16. blankText:"姓名不能为空"
17. },{
18. name:"age",
19. fieldLabel:"Age",
20. vtype:"age"
21. },{
22. hiddenName:"sex",
23. xtype:"combo",
24. fieldLabel:"Sex",
26. store:newExt.data.SimpleStore({
27. fields:[
28. {name:'Sex'}
29. ],
30. data:[["男"],["女"]]
31. }),
32. mode:'local',
33. displayField:'Sex',
34. triggerAction:'all',
35. emptyText:'选择性别...'
36. }]
37. })
38. },
39. getValues:function(){
40. if(this.getForm().isValid()){
41. returnnewExt.data.Record(this.getForm().getValues());
42. }
43. else{
44. throwError("ErrorMessage");
45. }
46. },
47. setValues:function(r){
48. this.getForm().loadRecord(r);
49. },
50. reset:function(){
51. this.getForm().reset();
52. }
53. });

对数据的维护有新增和更新两个动作，从设计的角度来讲就需要编写两个窗体对其进行操作。细心的朋友一定会想，新增和更新的动作都是针对相同的数据表，那么能不能只写一个窗体，然后复用呢？答案是肯定的。下面我们就先写一个窗体基类。

1. //新增,修改窗体基类
2. PersonInfoWindow=Ext.extend(Ext.Window,{
3. form:null,
5. constructor:function(){
6. this.addEvents("submit");
8. this.form=newPersonInfoFormPanel();
10. //Ext.apply(this.form,{baseCls:"x-plain"});
11. PersonInfoWindow.superclass.constructor.call(this,{
12. plain:true,
13. width:360,
14. modal:true,//模式窗体
15. onEsc:Ext.emptyFn,
16. closeAction:"hide",
17. items:[this.form],
18. buttons:[{
19. text:"确定",
20. handler:this.onSubmitClick,
21. scope:this
22. },{
23. text:"取消",
24. handler:this.onCancelClick,
25. scope:this
26. }]
27. });
28. //alert(this.onSubmitClick);
29. },
30. close:function(){
31. //需要重写CLose方法,
32. //否则在窗体被关闭其实体会被释放
33. this.hide();
34. this.form.reset();
35. },
36. onSubmitClick:function(){
37. //alert(Ext.util.JSON.encode(this.form.getValues().data));
38. try{
39. this.fireEvent("submit",this,this.form.getValues());
40. this.close();
41. }
42. catch(_err){
43. return;
44. }
45. },
46. onCancelClick:function(){
47. this.close();
48. }
49. });

基类写了之后，我们就可以使用继承的方法来编写新进和更新窗体了。

1. //定义新增数据窗体
2. InsertPersonInfoWindow=Ext.extend(PersonInfoWindow,{
3. title:"添加"
4. });
6. //==============================================================================
8. //定义编辑数据窗体
9. UpdatePersonInfoWindow=Ext.extend(PersonInfoWindow,{
10. title:"修改",
11. load:function(r){
12. this.form.setValues(r);
13. }
14. });

为了区分新增和更新窗体，我们在其各自的实现类中为其指定了Title属性，另外在更新窗体类中需要另外添加一个用于加载待编辑数据的方法Load。

 

脚本部分算是完成了，下面看看如何在HTML中使用。HTML中的引用代码

1. <scripttype="text/javascript">
2. Ext.QuickTips.init();
3. Ext.form.Field.prototype.msgTarget="side";
4. Ext.BLANK_IMAGE_URL="http://localhost:8080/ext-2.2/resources/images/default/s.gif";
6. Ext.apply(Ext.form.VTypes,{
7. "age":function(_v){
8. if(/^/d+$/.test(_v)){
9. var_age=parseInt(_v);
10. if((_age>0)&&(_age<200))returntrue;
11. }
12. returnfalse;
13. },
14. "ageText":"年龄必须在0到200之间",
15. "ageMask":/[0-9]/i
16. });
18. Ext.onReady(function(){
19. newPersonListGridPanel();
20. });
21. </script>

代码很简洁，也很清晰。只需要创建一个PersonListGridPanel即可，因为它自身包含了新增、修改的窗体对象，而新增和修改窗体中都使用到了负责数据编辑的PersonInfoFormPanel。

在PersonInfoFormPanel中使用了VTypes进行数据验证。

新增和修改窗体仅仅是界面，负责将用户在PersonInfoFormPanel中填写的数据传回到ListGrid中以便保存，或是将ListGrid中的数据传递到PersonInfoFormPanel中进行呈现，供用户编辑。

 

附上完整的HTML代码和JavaScript代码文件。

Grid.html

1. <html>
2. <head>
3. <title>ExtGrid</title>
4. <linkrel="stylesheet"type="text/css"href="http://localhost:8080/ext-2.2/resources/css/ext-all.css"/>
5. <scripttype="text/javascript"src="http://localhost:8080/ext-2.2/adapter/ext/ext-base.js"></script>
6. <scripttype="text/javascript"src="http://localhost:8080/ext-2.2/ext-all.js"></script>
7. <scripttype="text/javascript"src="PersonListGridPanel.js"></script>
9. <scripttype="text/javascript">
10. Ext.QuickTips.init();
11. Ext.form.Field.prototype.msgTarget="side";
12. Ext.BLANK_IMAGE_URL="http://localhost:8080/ext-2.2/resources/images/default/s.gif";
14. Ext.apply(Ext.form.VTypes,{
15. "age":function(_v){
16. if(/^/d+$/.test(_v)){
17. var_age=parseInt(_v);
18. if((_age>0)&&(_age<200))returntrue;
19. }
20. returnfalse;
21. },
22. "ageText":"年龄必须在0到200之间",
23. "ageMask":/[0-9]/i
24. });
26. Ext.onReady(function(){
27. newPersonListGridPanel();
28. });
29. </script>
30. </head>
31. <body>
32. </body>
33. </html>

PersonListGridPanel.js

 

1. //定义数据列表面板类
2. PersonListGridPanel=Ext.extend(Ext.grid.GridPanel,{
3. insertWin:null,
4. updateWin:null,
6. constructor:function(){
7. //添加自定义事件
8. this.addEvents("rowSelect");
10. this.insertWin=newInsertPersonInfoWindow();
11. this.insertWin.on("submit",this.onInsertWinSubmit,this);
13. this.updateWin=newUpdatePersonInfoWindow();
14. this.updateWin.on("submit",this.onUpdateWinSubmit,this);
16. PersonListGridPanel.superclass.constructor.call(this,{
17. renderTo:Ext.getBody(),
18. width:360,
19. height:300,
20. frame:true,
21. sm:newExt.grid.RowSelectionModel({
22. singleSelect:true,
23. listeners:{
24. "rowselect":{
25. fn:function(sm,rowIndex,r){
26. this.fireEvent("rowSelect",r);//触发自定义事件
27. },
28. scope:this
29. }
30. }
31. }),
32. store:newExt.data.JsonStore({
33. data:[{name:"李宗盛",age:28,sex:"男"},{name:"林忆莲",age:26,sex:"女"}],
34. fields:["name","sex","age"]
35. }),
36. draggable:false,
37. enableColumnMove:false,
38. title:"FirstGrid",
39. //iconCls:'icon-grid',
40. colModel:newExt.grid.ColumnModel([
41. {header:"StaffName",width:100,menuDisabled:true},
42. {header:"Age",width:100,sortable:true,dataIndex:"age",align:"right",tooltip:"这里是提示信息"},
43. {header:"Sex",width:100,sortable:true,dataIndex:"sex",align:"center"}
44. ]),
45. tbar:[{
46. name:"btnFirst",
47. //text:"First",
48. iconCls:"x-tbar-page-first",
49. handler:function(){
50. this.getSelectionModel().selectFirstRow();
51. },
52. scope:this
53. },{
54. name:"btnPrev",
55. //text:"Prev",
56. iconCls:"x-tbar-page-prev",
57. handler:function(){
58. this.getSelectionModel().selectPrevious();
59. },
60. scope:this
61. },{
62. name:"btnNext",
63. //text:"Next",
64. iconCls:"x-tbar-page-next",
65. handler:function(){
66. this.getSelectionModel().selectNext();
67. },
68. scope:this
69. },{
70. name:"btnLast",
71. //text:"Last",
72. iconCls:"x-tbar-page-last",
73. handler:function(){
74. this.getSelectionModel().selectLastRow();
75. },
76. scope:this
77. },"-",{
78. text:"添加",
79. handler:function(){
80. //***************************************************
81. //如果没有重写InsertPersonInfoWindow的Close方法
82. //在调用之前需要检查其实例insertWin是否被释放
83. //使用示例：
84. //if(!this.insertWin){
85. //this.insertWin=newInsertPersonInfoWindow();
86. //}
87. //this.insertWin.show();
88. //***************************************************
89. this.insertWin.show();
90. },
91. scope:this
92. },"-",{
93. text:"修改",
94. handler:function(){
95. varr=this.getActiveRecord();
96. if(!r)return;
99. //如何将数据填充到窗体中?
100. this.updateWin.show();
101. this.updateWin.load(r);
102. },
103. scope:this
104. },"-",{
105. text:"删除",
106. handler:function(){
107. varr=this.getActiveRecord();
108. if(!r)return;
109. Ext.MessageBox.confirm("删除","删除当前人员信息？",function(btn){
110. if(btn=="yes"){
111. this.delRecord(r);
112. }
113. },this);
114. },
115. scope:this
116. }]
117. });
118. },
119. getActiveRecord:function(){
120. varsm=this.getSelectionModel();
121. //没有选中的记录时，是抛出异常还是返回null???????
122. return(sm.getCount()===0)?null:sm.getSelected();
123. },
124. insert:function(r){
125. this.getStore().add(r);
126. },
127. delRecord:function(r){
128. this.getStore().remove(r);
129. },
130. onInsertWinSubmit:function(win,r){
131. this.insert(r);
132. },
133. onUpdateWinSubmit:function(win,r){
134. alert('onUpdateWinSubmit');
135. }
136. });
138. //==============================================================================
140. //定义数据维护面板，在后面定义的新增和修改窗体中都会使用到该面板
141. PersonInfoFormPanel=Ext.extend(Ext.form.FormPanel,{
142. constructor:function(){
143. PersonInfoFormPanel.superclass.constructor.call(this,{
144. //title:"PersonInfo",
145. frame:true,
146. width:360,
147. labelWidth:40,
148. defaultType:"textfield",
149. defaults:{anchor:"92%"},
150. items:[{
151. name:"name",//注意，这里使用name属性而不是id，因为PersonInfoFormPanel会被添加和插入两个窗体使用，使用id会有冲突，导致组件不能被正确显示
152. fieldLabel:"Name",
153. allowBlank:false,
154. emptyText:"请输入姓名",
155. blankText:"姓名不能为空"
156. },{
157. name:"age",
158. fieldLabel:"Age",
159. vtype:"age"
160. },{
161. hiddenName:"sex",
162. xtype:"combo",
163. fieldLabel:"Sex",
165. store:newExt.data.SimpleStore({
166. fields:[
167. {name:'Sex'}
168. ],
169. data:[["男"],["女"]]
170. }),
171. mode:'local',
172. displayField:'Sex',
173. triggerAction:'all',
174. emptyText:'选择性别...'
175. }]
176. })
177. },
178. getValues:function(){
179. if(this.getForm().isValid()){
180. returnnewExt.data.Record(this.getForm().getValues());
181. }
182. else{
183. throwError("信息不完整");
184. }
185. },
186. setValues:function(r){
187. //alert(Ext.util.JSON.encode(r.data));
188. this.getForm().loadRecord(r);
189. },
190. reset:function(){
191. this.getForm().reset();
192. }
193. });
195. //==============================================================================
197. //新增,修改窗体基类
198. PersonInfoWindow=Ext.extend(Ext.Window,{
199. form:null,
201. constructor:function(){
202. this.addEvents("submit");
204. this.form=newPersonInfoFormPanel();
206. //Ext.apply(this.form,{baseCls:"x-plain"});
207. PersonInfoWindow.superclass.constructor.call(this,{
208. plain:true,
209. width:360,
210. modal:true,//模式窗体
211. onEsc:Ext.emptyFn,
212. closeAction:"hide",
213. items:[this.form],
214. buttons:[{
215. text:"确定",
216. handler:this.onSubmitClick,
217. scope:this
218. },{
219. text:"取消",
220. handler:this.onCancelClick,
221. scope:this
222. }]
223. });
224. //alert(this.onSubmitClick);
225. },
226. close:function(){
227. //需要重写CLose方法,
228. //否则在窗体被关闭其实体会被释放
229. this.hide();
230. this.form.reset();
231. },
232. onSubmitClick:function(){
233. //alert(Ext.util.JSON.encode(this.form.getValues().data));
234. try{
235. this.fireEvent("submit",this,this.form.getValues());
236. this.close();
237. }
238. catch(_err){
239. return;
240. }
241. },
242. onCancelClick:function(){
243. this.close();
244. }
245. });
247. //==============================================================================
249. //定义新增数据窗体
250. InsertPersonInfoWindow=Ext.extend(PersonInfoWindow,{
251. title:"添加"
252. });
254. //==============================================================================
256. //定义编辑数据窗体
257. UpdatePersonInfoWindow=Ext.extend(PersonInfoWindow,{
258. title:"修改",
259. load:function(r){
260. this.form.setValues(r);
261. }
262. });

版权声明：本文为博主原创文章，未经博主允许不得转载。