ExtJS做的一个信息管理界面

前段时间公司让我们学习ExtJS，学习了一个礼拜，完成了个小练习，思来想去决定做个总结，但是又懒得敲word，于是就在代码上每行都加上注释，以后忘记了就翻开来看看。

在这里给出代码。

完成的功能如图所示。

 

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'