ExtJS做的一个信息管理界面。每一句都带有注释，可以当教科书用

在这里给出代码。

完成的功能如图所示。

 

Js代码  

1. /** 
2.  * 默认页面 
3.  *  
4.  * @author leaves.qq:1330771552 
5.  */  
6.   
7. Ext.define('SupplyManagementDesktop.defaultsWindow', {  
8.     extend : 'Ext.ux.desktop.Module',  
9.   
10.     requires : ['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',  
11.             'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],  
12.   
13.     id : 'defaultsWindow-win',  
14.   
15.     /*************************************************************************** 
16.      * ExtJS控件使用按照如下规则。 首先，创建控件，调用Ext.create 
17.      * weightName:空间命名空间，args：空间参数，用{}包围，当做对象传入 
18.      *  
19.      * ####################################### 注意JS中有如下语法： var object={ 
20.      * paramter1:value1, paramter2:value2, paramter3:value3 } 
21.      * object.paramter1可以直接获得value1 ##################################### 
22.      *  
23.      * ExtJS中所有空间创建方法都如上 
24.      *  
25.      * Ext.create(String weightName,Mixed args) 
26.      * 所以此处args相当于一个匿名对象（没有引用），但并非真的匿名对象 
27.      *  
28.      */  
29.     // 初始化窗体的方法  
30.     init : function() {  
31.         this.launcher = {  
32.             text : 'Defaults Window',  
33.             iconCls : 'icon-grid',  
34.             // 调用createWindow方法  
35.             handler : this.createWindow,  
36.             scope : this  
37.             // this指向Ext.define（这个方法用来声明命名空间。）定义的命名空间  
38.         };  
39.     },// 初始化窗体的方法结束  
40.   
41.     // 创建窗体的方法  
42.     createWindow : function() {  
43.         // 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。（猜测：可能不跟JS一样，属于ExtJS的语法）  
44.         var dataPanel;// 预定义一个GridPanel，用来显示数据  
45.         var innerPanel;// 存放Panel的容器  
46.         var workerPanel;  
47.         var westPanel;  
48.         var deptStore;  
49.         var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定，这个this是指向Ext.define还是指向创建的这个窗体  
50.         var desktop = this.app.getDesktop();  
51.   
52.         // 获取窗体，外部最大窗体，具体方法不清楚。  
53.         var win = desktop.getWindow('defaultsWindow-win');  
54.   
55.         // 创建按钮bar组件,是上面的几个按钮。  
56.         var buttonBar = Ext.create('Ext.toolbar.Toolbar', {  
57.             dock : 'top',  
58.             items : [{  
59.                         xtype : 'button',  
60.                         text : '新建',  
61.                         iconCls : 'add',  
62.                         handler : function() {  
63.                             // 自行新建操作，传入一个create字符串用来标示是什么按钮事件，传入dataPanel（注意：上面没有var  
64.                             // dataPanel;此处会报错。）因为后面的新建需要用到表格显示的数据（dataPanel.getSelectionModel().getSelection()）  
65.                             moduleObj.proAction("create", dataPanel,  
66.                                     workerPanel);  
67.                         }  
68.                     }, {  
69.                         // 分隔符，不解释。  
70.                         xtype : 'tbseparator'  
71.                     }, {  
72.                         xtype : 'button',  
73.                         text : '删除',  
74.                         iconCls : 'remove',  
75.                         handler : function() {  
76.                             moduleObj.proAction("delete", dataPanel);  
77.                         }  
78.                     }, {  
79.                         xtype : 'tbseparator'  
80.                     }, {  
81.                         xtype : 'button',  
82.                         text : '复制',  
83.                         iconCls : 'copy',  
84.                         handler : function() {  
85.                             moduleObj.proAction("copy", dataPanel, workerPanel);  
86.                         }  
87.                     }, {  
88.                         xtype : 'button',  
89.                         text : '重置检索',  
90.                         iconCls : 'reset',  
91.                         handler : function() {  
92.                             dataPanel.resetSearch();  
93.                         }  
94.                     }]  
95.         });// 创建按钮bar组件结束  
96.   
97.         // 临时创建的一个用来展示的store  
98.         var theStore = Ext.create('Ext.data.Store', {  
99.             fields : [{  
100.                         name : 'projectId',  
101.                         type : 'String'  
102.                     }, {  
103.                         name : 'projectCode',  
104.                         type : 'String'  
105.                     }, {  
106.                         name : 'projectName',  
107.                         type : 'String'  
108.                     }, {  
109.                         name : 'startDate',  
110.                         type : 'String'  
111.                     }, {  
112.                         name : 'endDate',  
113.                         type : 'string'  
114.                     }, {  
115.                         name : 'qualityTarget',  
116.                         type : 'string'  
117.                     }, {  
118.                         name : 'projectLeader',  
119.                         type : 'string'  
120.                     }, {  
121.                         name : 'projectStatus',  
122.                         type : 'string'  
123.                     }, {  
124.                         name : 'qualification',  
125.                         type : 'string'  
126.                     }, {  
127.                         name : 'constructionUnit',  
128.                         type : 'string'  
129.                     }],  
130.             pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个  
131.             // limit和satrt，start不需要指定ExtJS会自动计算，然后传值。  
132.             proxy : {  
133.                 type : 'ajax',// 使用传输方式为ajax（ajax是异步执行的操作，即不需要刷新页面即可申请后台资源。）  
134.                 method : 'POST',// post和get是HTML中表单（form）提交两种方式，get会在地址栏显示参数，post不显示  
135.                 url : '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='  
136.                         + 0,  
137.   
138.                 reader : {// 设置读取方式属性  
139.                     type : 'json',// 设置读取方式格式为：json字符串  
140.                     root : 'root',// 设置根元素，即读取上面fields种的name中对应值的元素，此处多为元素组，json字符串如：{A:a,B:[{},{},{},………………]}  
141.                     totalProperty : 'totalProperty'// 设置总页码  
142.                 }  
143.             },  
144.             autoLoad : true  
145.                 // 自动读取，即显示绑定该store的组件的时候直接读取数据  
146.         });  
147.         // 创建临时Store结束  
148.   
149.         // 创建分页bar组建  
150.         var pagebar = Ext.create('Ext.toolbar.Paging', {  
151.                     pageSize : 20,  
152.                     store : theStore,  
153.                     dock : 'bottom',  
154.                     setActive : false,  
155.                     refresh : false,  
156.                     displayInfo : true,  
157.                     plugins : Ext.create('Ext.ux.ProgressBarPager', {})  
158.                 });  
159.         // 创建分页bar组建结束  
160.   
161.         // 为theGirdPanel创建一个SelectionModel  
162.         var selectionModeltoGridPanel = Ext  
163.                 .create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选，就需要设置selModel属性这是设置selection的模型，创建一个模型Ext.selection.CheckboxModel  
164.         // 初始化gridPanel  
165.         dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', {  
166.                     title : '<font color=red>工程详细信息</font>',  
167.                     region : 'center',  
168.                     width : '100%',  
169.                     height : '96%',  
170.                     store : theStore,  
171.                     selModel : selectionModeltoGridPanel,  
172.                     // 一系列行，不解释，也可以var column=[`````````]然后columns:column  
173.                     iconCls : 'remove',  
174.                     columns : [{  
175.                                 dataIndex : 'projectId',  
176.                                 width : 80,  
177.                                 text : '项目号'  
178.                             }, {  
179.                                 dataIndex : 'projectCode',  
180.                                 width : 80,  
181.                                 text : '项目序号'  
182.                             }, {  
183.                                 dataIndex : 'projectName',  
184.                                 width : 100,  
185.                                 text : '项目名称'  
186.                             }, {  
187.                                 dataIndex : 'constructionUnit',  
188.                                 width : 100,  
189.                                 text : '建设单位'  
190.                             }, {  
191.                                 dataIndex : 'startDate',  
192.                                 width : 80,  
193.                                 text : '开工日期'  
194.                             }, {  
195.                                 dataIndex : 'endDate',  
196.                                 width : 80,  
197.                                 text : '竣工日期'  
198.                             }, {  
199.                                 dataIndex : 'qualityTarget',  
200.                                 width : 100,  
201.                                 text : '质量目标'  
202.                             }, {  
203.                                 dataIndex : 'projectLeader',  
204.                                 width : 100,  
205.                                 text : '项目负责人'  
206.                             }, {  
207.                                 dataIndex : 'projectStatus',  
208.                                 width : 80,  
209.                                 text : '项目状态'  
210.                             }, {  
211.                                 dataIndex : 'qualification',  
212.                                 width : 80,  
213.                                 text : '需要资质'  
214.                             }],  
215.                     dockedItems : [buttonBar, pagebar]  
216.                 });  
217.   
218.         // 绑定dataPanel鼠标双击事件。  
219.         dataPanel.on('itemdblclick', function() {  
220.                     moduleObj.proAction("update", dataPanel, workerPanel);  
221.   
222.                 });  
223.         // 初始化gridPanel结束  
224.   
225.         // 为下面的部门信息分类栏（grid）创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。  
226.         deptStore = Ext.create('Ext.data.Store', {  
227.                     fields : [{  
228.                                 name : 'deptId',  
229.                                 type : 'String'  
230.                             }, {  
231.                                 name : 'deptName',  
232.                                 type : 'String'  
233.                             }],  
234.                     proxy : {  
235.                         type : 'ajax',  
236.                         method : 'POST',  
237.                         url : '/Training/DeptInfoController/getAllDeptInfo.action',  
238.                         reader : {  
239.                             type : 'json',// 用json字符串  
240.                             root : 'root'  
241.                         }  
242.                     },  
243.                     autoLoad : true  
244.                 });  
245.   
246.         // 创建部门信息分类栏，  
247.         workerPanel = Ext.create('Ext.grid.Panel', {  
248.                     title : '部门信息',  
249.                     border : false,  
250.                     store : deptStore,  
251.                     hideHeaders : true,  
252.                     columns : [{  
253.                                 dataIndex : 'deptId',  
254.                                 hidden : true,  
255.                                 sortable : false,  
256.                                 width : 180  
257.                             }, {  
258.                                 dataIndex : 'deptName',  
259.                                 sortable : false,  
260.                                 width : 180  
261.                             }]  
262.                 });  
263.   
264.         // 给部门信息的grid绑定事件，当单击的时候触发事件，此事件用来刷新右侧列表  
265.         workerPanel.on('itemclick', function(grid, record) {  
266.             // 获取当前行的deptId列的值  
267.             var id = record.data.deptId;  
268.             // dataPanel.store：获取dataPanel的store属性的值，dataPanel.store.proxy获取数据来源属性，ataPanel.store.proxy.url获取数据来源属性的URL，  
269.             // 这个方法用来重新设置数据来源的地址，  
270.             // 注意：后面的?deptId是HTML传参方法，地址栏传参。跟form直接传参一样，后台可以接受。  
271.             dataPanel.store.proxy.url = '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='  
272.                     + id;  
273.             dataPanel  
274.                     .setTitle("<font color=red>"  
275.                             + (workerPanel.getSelectionModel().getSelection())[0].data.deptName  
276.                             + "</font>部门信息");// ExtJS中的标题等字符串属性支持HTML语言，直接设置格式。  
277.             dataPanel.store.load();// dataPanel.store：获取dataPanel的store属性的值，dataPanel.store.load()：调用取得的值的load()方法,用来重新加载store数据，实现grid刷新  
278.         });  
279.   
280.         // 初始工人信息Panel，同下  
281.         workerPane2 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
282.             title : 'BBBBBB',// 随便取标题  
283.             border : false,// 没有边框  
284.             store : theStore,  
285.             hideHeaders : true,  
286.             columns : [{  
287.                         dataIndex : 'projectName',  
288.                         sortable : false,// 不能排序  
289.                         width : 180  
290.                     }]  
291.         });  
292.         // 初始工人信息Panel，用来实现折叠效果的panel  
293.         workerPanel3 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中  
294.             title : 'CCCCCCC',// 随便取标题  
295.             border : false,// 没有边框  
296.             store : theStore,  
297.             hideHeaders : true,// 隐藏grid每列数据的标题  
298.             columns : [{  
299.                         dataIndex : 'projectName',  
300.                         sortable : false,// 不能排序  
301.                         width : 180  
302.                     }]  
303.         });  
304.   
305.         // 左边伸缩栏  
306.         westPanel = Ext.create("Ext.panel.Panel", {  
307.             collapsible : true,// 这个属性设置此panel容易可以隐藏（最小化）  
308.             title : '分类查看',  
309.             layout : 'accordion',// 这个属性设置此panel容易可以实现折叠效果  
310.             width : 200,  
311.             region : 'west',  
312.             iconCls : 'reset',  
313.             items : [workerPanel, workerPane2, workerPanel3]  
314.                 // 放置三个小panel容器，如上定义  
315.             });  
316.   
317.         // 创建容器，用来存放整个窗体的组件，并且在下面直接放置到win中。  
318.         theContainer = Ext.create('Ext.container.Container', {  
319.                     layout : 'border',  
320.                     items : [dataPanel, westPanel]  
321.                 });  
322.   
323.         // 判断是否已经创建最外边窗体，如果创建了，（JS是弱类型语言，认为null相当于false）  
324.         if (!win) {  
325.             win = desktop.createWindow({ // 所以此处的目的是：如果win已经初始化存在了，那么就不新创建窗体，直接调用下面的show（）方法  
326.                 // 下面属性不具体解释，详细可以查看API手册  
327.                 id : 'defaultsWindow-win',  
328.                 title : '工程详细信息设置',  
329.                 width : 1100,  
330.                 height : 600,  
331.                 iconCls : 'icon-grid',  
332.                 animCollapse : false,  
333.                 constrainHeader : true,  
334.                 layout : 'fit',  
335.                 items : [theContainer]  
336.                     // 把创建好存放所有组件的窗体放置到外围窗体中  
337.             });  
338.         }  
339.         win.show();// 显示窗体。  
340.         return win;// 把窗体的句柄（相当于内存引用）返回  
341.     },  
342.     // 创建窗体的方法结束  
343.   
344.     // 显示一个对话框的方法，暂时带有一个用来判断是什么按钮的属性  
345.     proAction : function(btn, dataPanel, workerPanel) {  
346.         var selectData;// 预设一个用来存放被选中的数据的变量  
347.         var innerPanel;  
348.         // 如果选择的是复制  
349.         if ("copy" == btn) {  
350.             if (dataPanel.getSelectionModel().getSelection().length == 0) {  
351.                 Ext.hx.msg("提示", "请先选择您要复制的行");  
352.                 return;  
353.             }  
354.   
355.             selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel  
356.                     .getSelectionModel().getCount()  
357.                     - 1].data;// 如果是删除的话需要读取被选中的数据，就初始化被selectData。  
358.         }  
359.         // 如果选择的是新建  
360.         if ("create" == btn) {  
361.             // 新建的时候设置选择的行为null，没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。  
362.             selectData = null;  
363.         }  
364.   
365.         // 如果选择的是复制  
366.         if ("update" == btn) {  
367.             selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的记录组成的数组。  
368.         }  
369.   
370.         // 如果选择的是删除  
371.         if ("delete" == btn) {  
372.             var oneDate;// 预设一个用来存放一条数据进行操作的变量  
373.             var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。  
374.             // 判断如果还没有选择任何行就提示并且返回方法  
375.             if (records.length == 0) {  
376.                 Ext.hx.msg("提示", "请先选择您要删除的行");  
377.                 return;  
378.             }  
379.   
380.             // 遍历所有的数组然后设置里面的各种标志  
381.             var array = new Array();// 预设一个用来存放新的data的数组  
382.             for (var i = 0; i < records.length; i++) {  
383.                 oneDate = records[i].data;// 取出其中一条  
384.                 oneDate.deleteFlg = true;// 设置删除标志  
385.                 array.push(oneDate);// 放置到数组中  
386.             }  
387.   
388.             // 用ajax来进行后台交互  
389.             Ext.Ajax.request({  
390.                 url : '/Training/myProjectInfoController/deleteProjectInfo.action',  
391.                 method : 'POST',  
392.                 success : function(res, opts) {// 交互成功的时候  
393.                     Ext.hx.msg("提示", '删除成功!');// 提示  
394.                     dataPanel.store.load();// 表格数据刷新  
395.                 },  
396.                 failure : function(res, opts) {  
397.                     Ext.hx.msg("提示", '删除失败!');  
398.                 },  
399.                 params : {  
400.                     jsonString : Ext.JSON.encode(array)  
401.                     // 调用ExtJS内置对象的方法，把数组转换成json字符串  
402.                 },  
403.                 scope : this  
404.                     // 作用范围本页。//具体不知道，没用。、  
405.             });  
406.   
407.             return;// 执行完成操作马上返回，不执行下面代码。  
408.         }  
409.   
410.         /* 下面定义一系列用来输入的文本框 */  
411.         deptBoxStore=Ext.create('Ext.data.Store', {  
412.                     fields : [{  
413.                                 name : 'deptId',  
414.                                 type : 'String'  
415.                             }, {  
416.                                 name : 'deptName',  
417.                                 type : 'String'  
418.                             }],  
419.                     proxy : {  
420.                         type : 'ajax',  
421.                         method : 'POST',  
422.                         url : '/Training/DeptInfoController/getAllDeptInfo.action',  
423.                         reader : {  
424.                             type : 'json',// 用json字符串  
425.                             root : 'root'  
426.                         }  
427.                     },  
428.                     autoLoad : true  
429.                 });  
430.         // 下面是一个下来选择菜单，用来下拉选择部门。  
431.         var dptBox = Ext.create("Ext.form.field.ComboBox", {  
432.             fieldLabel : '部门选择',  
433.             store :deptBoxStore ,  
434.             displayField : 'deptName',  
435.             valueField : 'deptId',  
436.             allowBlank : false,// 不允许为空  
437.             editable : false,// 不允许编辑  
438.             x : 10,  
439.             y : 20  
440.         });  
441.         //设置上面部门选择的Combox默认值  
442.         deptBoxStore.load({   
443.         callback : function(records) {  
444.             dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);   
445.         }   
446.     });  
447.           
448.         // 各种输入框，制定value（默认值）在没有selectData是null（即if ("create" ==  
449.         // btn)的时候）设置为“”（空字符串），否则分别取出选择行的每一个数据。作为默认数据，  
450.         var projectIdField = Ext.create('Ext.form.field.Text', {  
451.                     fieldLabel : '项目号',  
452.                       
453.                     x : 10,  
454.                     y : 20,  
455.                     value : selectData != null ? selectData.projectId : ""  
456.                 });  
457.         var projectCodeField = Ext.create('Ext.form.field.Text', {  
458.                     fieldLabel : '项目序号',  
459.                       
460.                     x : 10,  
461.                     y : 50,  
462.                     value : selectData != null ? selectData.projectCode : ""  
463.                 });  
464.         var projectNameField = Ext.create('Ext.form.field.Text', {  
465.                     fieldLabel : '项目名称',  
466.                     allowBlank : false,  
467.                     blankText : '不可以为空',  
468.                       
469.                     x : 10,  
470.                     y : 80,  
471.                     value : selectData != null ? selectData.projectName : ""  
472.                 });  
473.         var constructionUnitField = Ext.create('Ext.form.field.Text', {  
474.                     fieldLabel : '建设单位',  
475.                       
476.                     x : 10,  
477.                     y : 110,  
478.                     value : selectData != null  
479.                             ? selectData.constructionUnit  
480.                             : ""  
481.                 });  
482.         var startDateField = Ext.create('Ext.form.field.Date', {  
483.                     format : 'Y-m-d h:m:s ',  
484.                     fieldLabel : '开工日期',  
485.                     blankText : '不可以为空',  
486.                     allowBlank : false,  
487.                       
488.                     x : 10,  
489.                     y : 140,  
490.                     value : selectData != null  
491.                             ? selectData.startDate  
492.                             : new Date()  
493.                 });  
494.         var endDateField = Ext.create('Ext.form.field.Date', {  
495.                     format : 'Y-m-d h:m:s ',  
496.                     fieldLabel : '竣工日期',  
497.                     blankText : '不可以为空',  
498.                     allowBlank : false,  
499.                       
500.                     x : 10,  
501.                     y : 170,  
502.                     value : selectData != null  
503.                             ? selectData.endDate  
504.                             : new Date()  
505.                 });  
506.         var qualityTargetField = Ext.create('Ext.form.field.Text', {  
507.                     fieldLabel : '质量目标',  
508.                       
509.                     x : 10,  
510.                     y : 200,  
511.                     value : selectData != null ? selectData.qualityTarget : ""  
512.                 });  
513.         var projectLeaderField = Ext.create('Ext.form.field.Text', {  
514.                     fieldLabel : '项目负责人',  
515.                       
516.                     x : 10,  
517.                     y : 230,  
518.                     value : selectData != null ? selectData.projectLeader : ""  
519.                 });  
520.         var projectStatusField = Ext.create('Ext.form.field.Text', {  
521.                     fieldLabel : '项目状态',  
522.                       
523.                     x : 10,  
524.                     y : 260,  
525.                     value : selectData != null ? selectData.projectStatus : ""  
526.                 });  
527.         var qualificationField = Ext.create('Ext.form.field.Text', {  
528.                     fieldLabel : '需要资质',  
529.                       
530.                     x : 10,  
531.                     y : 290,  
532.                     value : selectData != null ? selectData.projectStatus : ""  
533.                 });  
534.   
535.         var submitButton = Ext.create('Ext.button.Button', {  
536.             text : '确定',  
537.             x : 10,  
538.             y : 320,  
539.             value : selectData != null ? selectData.projectStatus : "",  
540.             handler : function() {  
541.                 var arr = new Array();  
542.                 // 上面说道的JS的定义对象的方法，  
543.                 /** 
544.                  * ####################################### 注意JS中有如下语法： var 
545.                  * object={ paramter1:value1, paramter2:value2, paramter3:value3 } 
546.                  * object.paramter1可以直接获得value1 
547.                  * ##################################### 
548.                  */  
549.                 var data = {  
550.                     projectId : projectIdField.getValue(),  
551.                     projectCode : projectCodeField.getValue(),  
552.                     projectName : projectNameField.getValue(),  
553.                     constructionUnit : constructionUnitField.getValue(),  
554.                     startDate : startDateField.getValue(),  
555.                     endDate : endDateField.getValue(),  
556.                     qualityTarget : qualityTargetField.getValue(),  
557.                     projectLeader : projectLeaderField.getValue(),  
558.                     projectStatus : projectStatusField.getValue(),  
559.                     qualification : qualificationField.getValue(),  
560.                     deptId : dptBox.getValue(),  
561.                     modifyFlg : "update" == btn ? true : false  
562.                 };  
563.   
564.                 // 上面定义的data有了projectId，projectCode，······deptId，modifyFlg这些属性，可以直接data.modifyFlg取得值。  
565.                 if (!confirm("确定？")) {// confirm("确定？")弹出对话框，显示确定？点击是的时候返回true，此处判断如果端机否，直接返回方法不执行下面语句。  
566.                     return;  
567.                 }  
568.                 arr.push(data);// 把设置好属性的data对象放置到arr数组中。  
569.   
570.                 // 用AJAX跟后台交互。  
571.                 Ext.Ajax.request({  
572.                     url : '/Training/myProjectInfoController/saveProjectInfo.action',  
573.                     params : {  
574.                         jsonString : Ext.JSON.encode(arr)  
575.                     },  
576.                     success : function(response) {  
577.                         Ext.hx.msg("提示", "成功");  
578.                         var dialog = Ext.getCmp('theDialog');// Ext.getCmp（String  
579.                         // comID）;传入组件ID，返回组件句柄（内存引用）  
580.                         dataPanel.store.load(); // 刷新panel不解释  
581.                         dialog.close();// 把窗体关闭（不显示）  
582.                         dialog.destroy();// 把窗体销毁（清空内存）  
583.                     },  
584.                     failure : function(response) {// 失败提示  
585.                         Ext.hx.msg("提示", "失败");  
586.                     }  
587.                 });  
588.             }  
589.         });  
590.         var resetButton = Ext.create('Ext.button.Button', {  
591.                     text : '重置',  
592.                     x : 70,  
593.                     y : 320,  
594.                     value : selectData != null ? selectData.projectStatus : "",  
595.                     handler : function() {  
596.                         /* 
597.                          * API上抄来的，不知道什么意思。 up( String selector ) : Container 
598.                          * Walks up the ownerCt axis looking for an ancestor 
599.                          * Container which matches the passed simple selector. 
600.                          */  
601.                         this.up('form').getForm().reset();// 查找form上面的form（记住这么用吧，说不清楚。仔细看  
602.                         // innerPanel =  
603.                         // Ext.create('Ext.form.Panel',  
604.                         // {  
605.                         // 这句就知道了。）向上找form元素获取form表单，然后重置  
606.                     }  
607.                 });  
608.   
609.         // 创建用来进行输入的文本框数组  
610.         /** 
611.          * 此处使用的是Ext.form.Panel目的是为了上面的this.up('form').getForm().reset(); 
612.          */  
613.         innerPanel = Ext.create('Ext.form.Panel', {// 创建一个表单控件，  
614.             id : 'innerPanel',  
615.             height : "100%",  
616.             width : "100%",  
617.             layout : {  
618.                 type : 'absolute'  
619.             },  
620.             id : 'innerPanel',  
621.             waitMsgTarget : true,// 显示错误提示的小叹号  
622.   
623.             fieldDefaults : {  
624.                 labelWidth : 85,  
625.                 msgTarget : 'side'// 错误提示的字体  
626.             },  
627.             items : [dptBox, projectCodeField, projectNameField,  
628.                     constructionUnitField, startDateField, endDateField,  
629.                     qualityTargetField, projectLeaderField, projectStatusField,  
630.                     qualificationField, submitButton, resetButton]  
631.         });  
632.   
633.         // 准备好一个用来显示窗体的dialog，实际上是一个窗体  
634.         var dlalog = Ext.create('Ext.window.Window', {  
635.             id : 'theDialog',  
636.             title : '要点击之后显示的窗体',  
637.             height : 500,  
638.             width : 300,  
639.             layout : 'fit',  
640.             items : [innerPanel],  
641.             modal : true  
642.                 // 模态窗体，显示的时候不允许操作后面的控件。  
643.             });  
644.         dlalog.show();  
645.     }  
646.         // 显示一个对话框的方法结束  
647. });