Ext面向对象开发实践(turn)

示例程序简述：

这个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 = new InsertPersonInfoWindow();
11. this.insertWin.on("submit", this.onInsertWinSubmit, this);
13. this.updateWin = new UpdatePersonInfoWindow();
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: new Ext.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: new Ext.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: "First Grid",
39. //iconCls:'icon-grid',
40.             colModel: new Ext.grid.ColumnModel([
41.                 {header: "Staff Name", 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 = new InsertPersonInfoWindow();
54. //}
55. //this.insertWin.show();
56. //***************************************************
57. this.insertWin.show();
58.                 },
59.                 scope: this
60.             }, "-", {
61.                 text: "修改人员",
62.                 handler: function() {
63. var r = 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. var r = 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. var sm = 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: "Person Info",
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: new Ext.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. return new Ext.data.Record(this.getForm().getValues());
42.         }
43. else {
44. throw Error("Error Message");
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 = new PersonInfoFormPanel();
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. <script type="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)) return true;
11.                     }
12.                     return false;
13.                 },
14.                 "ageText": "年龄必须在0到200之间",
15.                 "ageMask": /[0-9]/i
16.             });
18.             Ext.onReady(function() {
19.                 new PersonListGridPanel();
20.             });
21. </script>

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

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

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

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

Grid.html

1. <html>
2. <head>
3. <title>Ext Grid</title>
4. <link rel="stylesheet" type="text/css" href="http://localhost:8080/ext-2.2/resources/css/ext-all.css"/>
5. <script type="text/javascript" src="http://localhost:8080/ext-2.2/adapter/ext/ext-base.js"></script>
6. <script type="text/javascript" src="http://localhost:8080/ext-2.2/ext-all.js"></script>
7. <script type="text/javascript" src="PersonListGridPanel.js"></script>
9. <script type="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)) return true;
19.                     }
20.                     return false;
21.                 },
22.                 "ageText": "年龄必须在0到200之间",
23.                 "ageMask": /[0-9]/i
24.             });
26.             Ext.onReady(function() {
27.                 new PersonListGridPanel();
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 = new InsertPersonInfoWindow();
11. this.insertWin.on("submit", this.onInsertWinSubmit, this);
13. this.updateWin = new UpdatePersonInfoWindow();
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: new Ext.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: new Ext.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: "First Grid",
39. //iconCls:'icon-grid',
40.             colModel: new Ext.grid.ColumnModel([
41.                 {header: "Staff Name", 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 = new InsertPersonInfoWindow();
86. //}
87. //this.insertWin.show();
88. //***************************************************
89. this.insertWin.show();
90.                 },
91.                 scope: this
92.             }, "-", {
93.                 text: "修改",
94.                 handler: function() {
95. var r = 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. var r = 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. var sm = 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: "Person Info",
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: new Ext.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. return new Ext.data.Record(this.getForm().getValues());
181.         }
182. else {
183. throw Error("信息不完整");
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 = new PersonInfoFormPanel();
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. });