Ext面向对象开发实践

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

效果图

 

示例程序简述：

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

 

使用到的Ext组件

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

 

 

 

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

1. //定义数据列表面板类
2. PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
3.     //用于新增数据的窗体
4.     insertWin: null,
5.     
6.     constructor: function() {
7.         //添加自定义事件
8.         this.addEvents("rowSelect");
9.         
10.         this.insertWin = new InsertPersonInfoWindow(); //创建数据添加窗体
11.         this.insertWin.on("submit", this.onInsertWinSubmit, this); //为数据创建窗体指定Submit事件处理句柄
12.         
13.         PersonListGridPanel.superclass.constructor.call(this, {
14.             renderTo: Ext.getBody(),
15.             width: 360,
16.             height: 300,
17.             frame:true,
18.             sm: new Ext.grid.RowSelectionModel({
19.                 singleSelect:true,
20.                 listeners: {
21.                     "rowselect": {
22.                         fn: function(sm, rowIndex, r) {
23.                             this.fireEvent("rowSelect", r); //触发自定义事件
24.                         },
25.                         scope: this
26.                     }
27.                 }
28.             }),
29.             store: new Ext.data.JsonStore({
30.                     data: [{name: "李宗盛", age: 28, sex: "男"}, {name: "林忆莲", age: 26, sex: "女"}],
31.                     fields: ["name", "sex", "age"]
32.             }),
33.             draggable: false,
34.             enableColumnMove: false,
35.             title: "First Grid",
36.             //iconCls:'icon-grid',
37.             colModel: new Ext.grid.ColumnModel([
38.                 {header: "Staff Name", width: 100, menuDisabled: true},
39.                 {header: "Age", width: 100, sortable: true, dataIndex: "age", align: "right", tooltip: "这里是提示信息"},
40.                 {header: "Sex", width: 100, sortable: true, dataIndex: "sex", align: "center"}
41.             ]),
42.             tbar: [{
43.                 text: "添加人员",
44.                 handler: function() {
45.                     this.insertWin.show();
46.                 },
47.                 scope: this
48.             }]
49.         });
50.     },
51.     getActiveRecord: function() {
52.         var sm = this.getSelectionModel();
53.         return (sm.getCount() === 0) ? null : sm.getSelected();
54.     },
55.     insert: function(r) {
56.         this.getStore().add(r);
57.     },
58.     onInsertWinSubmit: function(win, r) {
59.         this.insert(r);
60.     }
61. });

数据维护面板代码

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",
25.                 
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. });

数据新增窗体代码

2. //定义新增数据窗体
3. InsertPersonInfoWindow = Ext.extend(Ext.Window, {
4.     form: new PersonInfoFormPanel(), //这句可以写在这里是因为PersonInfoFormPanel定义在该类之前
5.     
6.     constructor: function() {
7.         this.addEvents("submit");
9.         InsertPersonInfoWindow.superclass.constructor.call(this, {
10.             title: "添加",
11.             plain: true,
12.             width: 360,
13.             modal: true, //模式窗体
14.             onEsc: Ext.emptyFn,
15.             closeAction: "hide",
16.             items: [this.form],
17.             buttons: [{
18.                 text: "确  定",
19.                 handler: this.onSubmitClick,
20.                 scope: this
21.             }, {
22.                 text: "取  消",
23.                 handler: this.onCancelClick,
24.                 scope: this
25.             }]
26.         });
27.         //alert(this.onSubmitClick);
28.     },
29.     close: function() {
30.         //需要重写CLose方法,
31.         //否则在窗体被关闭其实体会被释放
32.         this.hide();
33.         this.form.reset();
34.     },
35.     onSubmitClick: function() {
36.         //alert(Ext.util.JSON.encode(this.form.getValues().data));
37.         try {
38.             this.fireEvent("submit", this, this.form.getValues());
39.             this.close();
40.         }
41.         catch(_err) {
42.             return;
43.         }
44.     },
45.     onCancelClick: function() {
46.         this.close();
47.     }
48. });

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";
5.             
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>
8.         
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";
13.             
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.     modifyWin: null,
5.     
6.     constructor: function() {
7.         //添加自定义事件
8.         this.addEvents("rowSelect");
9.         
10.         this.insertWin = new InsertPersonInfoWindow();
11.         this.insertWin.on("submit", this.onInsertWinSubmit, this);
12.         
13.         this.modifyWin = new ModifyPersonInfoWindow();
14.         this.modifyWin.on("submit", this.onModifyWinSubmit, 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;
65.                     alert(Ext.util.JSON.encode(r.data));
66.                     this.modifyWin.load(r);
67.                     //如何将数据填充到窗体中?
68.                     this.modifyWin.show();
69.                 },
70.                 scope: this
71.             }, "-", {
72.                 text: "删除人员"
73.             }]
74.         });
75.     },
76.     getActiveRecord: function() {
77.         var sm = this.getSelectionModel();
78.         return (sm.getCount() === 0) ? null : sm.getSelected();
79.     },
80.     insert: function(r) {
81.         this.getStore().add(r);
82.     },
83.     onInsertWinSubmit: function(win, r) {
84.         this.insert(r);
85.     },
86.     onModifyWinSubmit: function(win, r) {
87.         alert('onModifyWinSubmit');
88.     }
89. });
91. //==============================================================================
93. //定义数据维护面板，在后面定义的新增和修改窗体中都会使用到该面板
94. PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
95.     constructor: function() {
96.         PersonInfoFormPanel.superclass.constructor.call(this, {
97.             //title: "Person Info",
98.             frame: true,
99.             width: 360,
100.             labelWidth: 40,
101.             defaultType: "textfield",
102.             defaults: { anchor: "92%" },
103.             items: [{
104.                 name: "name", //注意，这里使用name属性而不是id，因为PersonInfoFormPanel会被添加和插入两个窗体使用，使用id会有冲突，导致组件不能被正确显示
105.                 fieldLabel: "Name",
106.                 allowBlank: false,
107.                 emptyText: "请输入姓名",
108.                 blankText: "姓名不能为空"
109.             }, {
110.                 name: "age",
111.                 fieldLabel: "Age",
112.                 vtype: "age"
113.             }, {
114.                 hiddenName: "sex",
115.                 xtype: "combo",
116.                 fieldLabel: "Sex",
117.                 
118.                 store: new Ext.data.SimpleStore({
119.                     fields: [
120.                        {name: 'Sex'}
121.                     ],
122.                     data:[["男"], ["女"]]
123.                 }),
124.                 mode: 'local',
125.                 displayField:'Sex',
126.                 triggerAction: 'all',
127.                 emptyText:'选择性别...'
128.             }]
129.         })
130.     },
131.     getValues: function() {
132.         if (this.getForm().isValid()) {
133.             return new Ext.data.Record(this.getForm().getValues());
134.         }
135.         else {
136.             throw Error("Error Message");
137.         }
138.     },
139.     setValues: function(r) {
140.         this.getForm().loadRecord(r);
141.     },
142.     reset: function() {
143.         this.getForm().reset();
144.     }
145. });
147. //==============================================================================
149. //定义新增数据窗体
150. InsertPersonInfoWindow = Ext.extend(Ext.Window, {
151.     form: new PersonInfoFormPanel(), //这句可以写在这里是因为PersonInfoFormPanel定义在该类之前
152.     
153.     constructor: function() {
154.         this.addEvents("submit");
156.         //Ext.apply(this.form, {baseCls: "x-plain"});
157.         InsertPersonInfoWindow.superclass.constructor.call(this, {
158.             title: "添加",
159.             plain: true,
160.             width: 360,
161.             modal: true, //模式窗体
162.             onEsc: Ext.emptyFn,
163.             closeAction: "hide",
164.             items: [this.form],
165.             buttons: [{
166.                 text: "确  定",
167.                 handler: this.onSubmitClick,
168.                 scope: this
169.             }, {
170.                 text: "取  消",
171.                 handler: this.onCancelClick,
172.                 scope: this
173.             }]
174.         });
175.         //alert(this.onSubmitClick);
176.     },
177.     close: function() {
178.         //需要重写CLose方法,
179.         //否则在窗体被关闭其实体会被释放
180.         this.hide();
181.         this.form.reset();
182.     },
183.     onSubmitClick: function() {
184.         //alert(Ext.util.JSON.encode(this.form.getValues().data));
185.         try {
186.             this.fireEvent("submit", this, this.form.getValues());
187.             this.close();
188.         }
189.         catch(_err) {
190.             return;
191.         }
192.     },
193.     onCancelClick: function() {
194.         this.close();
195.     }
196. });
198. //==============================================================================
200. //定义编辑数据窗体
201. ModifyPersonInfoWindow = Ext.extend(Ext.Window, {
202.     form: null,
203.     
204.     constructor: function() {
205.         this.form = new PersonInfoFormPanel();
206.         //this.form.getComponent("name").readOnly = true;
207.         
208.         ModifyPersonInfoWindow.superclass.constructor.call(this, {
209.             title: "修改",
210.             plain: true,
211.             width: 360,
212.             modal: true, //模式窗体
213.             onEsc: Ext.emptyFn, //禁止使用Esc键关闭窗体
214.             closeAction: "hide",
215.             items: [this.form],
216.             buttons: [{
217.                 text: "确  定",
218.                 handler: this.onSubmitClick,
219.                 scope: this
220.             }, {
221.                 text: "取  消",
222.                 handler: this.onCancelClick,
223.                 scope: this
224.             }]
225.         });
226.         //alert(this.onSubmitClick);
227.     },
228.     close: function() {
229.         //需要重写CLose方法,
230.         //否则在窗体被关闭其实体会被释放
231.         this.hide();
232.         this.form.reset();
233.     },
234.     load: function(r) {
235.         alert(this.getForm());
236.         this.form.setValues(r);
237.     },
238.     onSubmitClick: function() {
239.         try {
240.             this.fireEvent("submit", this, this.form.getValues());
241.             this.close();
242.         }
243.         catch(_err) {
244.             return;
245.         }
246.     },
247.     onCancelClick: function() {
248.         this.close();
249.     } 
250. });