Ext2.0的通用grid包括（增、删、改、查、导出excel） (转)

 

下面为扩张grid的 代码

1. /**
2.  * @auther huangfeng
3.  * @class   Ext.ux.GridExtend
4.  * 通用的grid
5.  */
6. Ext.ux.GridExtend=function(config){
7.     Ext.QuickTips.init();
8.     this.config=config;
9. 
   
10.     this.filters=this.config.filters||'';
11.     
12.     
13.     /**
14.      *  @param  {String}
15.      * 显示列表的id
16.      */
17.     this.el=this.config.el||document.body;
18.     /**
19.      * @param   {String}
20.      * 读取编辑数据的form的url
21.      */
22.     this.editUrl=this.config.editUrl;
23.     /**
24.      * @param   {String}
25.      * 读取编辑数据的form的url
26.      */
27.     this.deleteUrl=this.config.deleteUrl;
28.     /**
29.      * @param   {String}
30.      * 读取列表数据的url
31.      */
32.     this.storeUrl=this.config.storeUrl;
33.     /**
34.      * @param   {String}
35.      * 保存添加到列表数据的url
36.      */
37.     this.formSaveUrl=this.config.formSaveUrl;
38.     /**
39.      * @param   {String}
40.      * 列表的标题
41.      */
42.     this.title=this.config.title||'';
43.     /**
44.      * @param   {Array}
45.      * 列表顶部状态栏
46.      */
47.     this.tbar=this.config.tbar||[{//grid顶部栏位
48.             text:'添加',                  //按钮的名称
49.             tooltip:'添加数据',             //鼠标停留在按钮上的提示
50.             iconCls:'add',                  //按钮图表的类
51.             handler:this.newInfo.createDelegate(this)           //处理按钮被点击时触发的时间函数
52.         },'-',{//'-'为多按钮间隔符
53.             text:'删除',                  //删除按钮的名称
54.             tooltip:'删除数据',             //鼠标停留在按钮上的提示
55.             iconCls:'remove',               //按钮图表的类
56.             handler:this.handlerDelete.createDelegate(this)         //处理按钮被点击时触发的时间函数
57.         },'-',{
58.             text:'导出Excel',                 //删除按钮的名称
59.             tooltip:'导出Excel',              //鼠标停留在按钮上的提示
60.             iconCls:'exportExcel',
61.             handler:this.exportExcel.createDelegate(this)           //处理按钮被点击时触发的时间函数
62.         }];
63. 
    
64.     /**
65.      * @param   选择框对象
66.      */
67.     this.sm=this.config.sm||new Ext.grid.CheckboxSelectionModel({//start Ext.grid.CheckboxSelectionModel
68.         singleSelect:false                  //是否只能选择一个
69.     });
70.     /**
71.      * @param   {Array}
72.      * 列表的栏的前面数据
73.      */
74.     this.cmDataArrayBefore=[//start Ext.grid.ColumnModel
75.         //defaultSortable:true,             //默认情况下为排序
76.         new Ext.grid.RowNumberer(),         //数据函数序列号
77.         this.sm
78.     ];
79.     /**
80.      * @param   {Array}
81.      * 显示的内容是从后台读取出来的数据,所以此数据中的dataIndex属性要与<br>
82.      * 从后台读取的字段要一致
83.      */
84.     this.cmDataArray=this.config.cmDataArray||[];
85.     /**
86.      * @param   {Array}
87.      * 列表的栏的后面数据
88.      */
89.     this.cmDataArrayAfter=this.config.cmDataArrayAfter||[];
90.     /**
91.      * @param   {Ext.grid.ColumnModel}
92.      * 列表的栏位数据
93.      */
94.     this.cm=this.config.cm||new Ext.grid.ColumnModel(
95.             this.cmDataArrayBefore.concat(this.cmDataArray).concat(this.cmDataArrayAfter)
96.     );//end Ext.grid.ColumnModel    
97.     
98.     /**
99.      * @param   {Array}
100.      * 读取gridStore数据的字段设置数据对象
101.      */
102.     this.gridStoreFields=this.config.gridStoreFields||new Array();
103.     
104.     /*
105.      * 如果this.gridStoreFields中没有数据,把this.cmDataArray中的dataIndex的属性值<br>
106.      * 赋予gridStoreFields数组中对象的name属性值
107.      */
108.     if(this.gridStoreFields.length==0){
109.         for(var i=0,len=this.cmDataArray.length;i<len;i++){
110.             this.gridStoreFields[i]={name:this.cmDataArray[i].dataIndex};
111.         }
112.     }
113.     
114.     /**
115.      * @param   {new Ext.data.Store}
116.      * 从后台读取的列表内容
117.      */ 
118.     this.gridStore=this.config.gridStore||new Ext.data.Store({//start Ext.data.Store
119.         proxy:new Ext.data.HttpProxy({
120.             url:this.storeUrl                   //读取数据的url
121.         }),
122.         reader:new Ext.data.JsonReader({//start Ext.data.JsonReader
123.             root:'rows',                    //存储数据的属性
124.             totalProperty:'results',        //总共的页数
125.             id:'uniqueCode'                 //每行的id值
126.         },                                  //end Ext.data.JsonReader
127.         this.gridStoreFields)
128.     });//end Ext.data.Store
129.     
130.     this.gridStore.load({params:{start: 0, limit: 10}});
131.     /**
132.      * @param   {Ext.PagingToolbar}
133.      * 底部状态栏
134.      */
135.     this.bbar=this.config.bbar||new Ext.PagingToolbar({     //在grid底层添加分页工具栏
136.             pageSize:10,                    //显示的数据条数
137.             store:this.gridStore,           //选择翻页按钮时的加载到grid的数据
138.             displayInfo:true,               //设置是否显示分页栏的信息
139.             displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',//消息栏的页数信息
140.             emptyMsg:"没有记录"             //当没有记录时要显示的信息
141.         });//end bbar
142.     /**
143.      * 如果要设置此参数必须在cm中设置相应的id
144.      */
145.     this.autoExpandColumn=this.config.autoExpandColumn||'';
146.         
147.     /**
148.      * @param   {Object}
149.      * 默认情况下有此显现,如果不需要可以为false
150.      * 必须含有下列参数:<br>
151.      * loadingEL        {String}    加载页面时显示的内容id<br>
152.      * loadingMaskEl    {String}    渐显的内容id<br> 
153.      */ 
154.     this.loadingMark=this.config.loadingMark||{
155.         loadingEL:'loading',
156.         loadingMaskEL:'loading-mask'
157.     };
158.     /**
159.      * @param   {Ext.grid.GridPanel}
160.      * @private
161.      */
162.     this.grid=this.config.gridStore||new Ext.grid.GridPanel({
163.         //el:this.el,                           //显示grid对象的层ID.
164.         store:this.gridStore,                   // grid装载的数据.
165.         viewConfig:{
166.             autoFill:true,
167.             deferEmptyText:'请等待...',
168.             emptyText:'没有数据',
169.             enableRowBody:true
170.         }, 
171.         sm:this.sm,                             //在每行数据前添加的一组checkBox
172.         height:Ext.get(this.el).getComputedHeight(),
173.         //autoHeight:true,
174.         loadMask:true, 
175.         maskDisabled:true,
176.         cm:this.cm,                             //设置栏位.
177.         title:this.title,                       //标题名称.
178.         iconCls:'icon-grid',                //标题前的图片css类
179.         autoExpandColumn:this.autoExpandColumn,
180.         plugins: this.filters,
181.         bbar:this.bbar,
182.         tbar:this.tbar
183.     });
184.     
185.     this.formFields=this.config.formFields||new Array();
186.     
187.     /**
188.      * 双击数据的事件，弹出一个编辑此条数据的层 
189.      * @param   grid        此列表的对象
190.      * @param   rowIndex    在列表中的行数
191.      * @param   e           触发此事件的事件对象
192.      */
193.     this.rowdblclick=this.config.rowdblclick||function(grid, rowIndex, e){
194.         var selectId=this.gridStore.data.items[rowIndex].id;
195.         this.editInfo(selectId);
196.     };
197.     this.grid.on('rowdblclick',this.rowdblclick.createDelegate(this));
198.     this.grid.render(this.el);
199.     
200.     //当js加载完毕后删除loading页面并渐显内容
201.     if(this.loadingMark){
202.         setTimeout(function(){
203.             Ext.get(this.loadingMark.loadingEL).remove();
204.             Ext.get(this.loadingMark.loadingMaskEL).fadeOut({remove:true});
205.         }.createDelegate(this), 250);
206.     }   
207. }
208. 
     
209. Ext.ux.GridExtend.prototype={
210.     /**
211.      * 加载 form表单的数据
212.      * @param   selectId    选择此条数据的唯一标识码，此参数发送到后台处理
213.      */
214.     editInfo:function(selectId){
215.         var form=this.getForm();
216.         
217.         form.form.load({//start load 参数设置
218.             url:this.editUrl,
219.             params:{
220.                 uniqueCode:selectId
221.             },
222.             waitMsg:'Loading..'
223.         });//end load 参数设置
224.         
225.         this.formWindow(form,'编辑');
226.     },
227.     getForm:function(){
228.         //错误信息放在右边
229.         Ext.form.Field.prototype.msgTarget = 'side';
230.         //var formSaveUrl=this.formSaveUrl;
231.         //var formFields=this.formFields;
232.         var formSaveUrl=Ext.clone(this.formSaveUrl);
233.         var formFields=Ext.clone(this.formFields);
234.         
235.         //实例化form面板
236.         var form=new Ext.form.FormPanel({//start Ext.form.FormPanel
237.             baseCls:'x-plain',
238.             url:this.formSaveUrl,
239.             frame:true,
240.             id:'form',
241.             items:formFields
242.         });//end Ext.form.FormPanel
243.         
244.         return form;
245.     },
246.     /**
247.      * 装form表单的窗口
248.      * @param   form            要装载的form
249.      * @param   titlePre        标题的前缀
250.      */
251.     formWindow:function(form,titlePre){
252.         //实例化窗口
253.         this.window=new Ext.Window({//start Ext.Window
254.             title:titlePre+'任务列表',
255.             width:500,
256.             height:500,
257.             minWidth:300,
258.             minHeight:300,
259.             layout:'fit',
260.             //closeAction:'hide',
261.             plain:true,
262.             bodyStyle:'padding:5px',
263.             iconCls:'form',
264.             buttonAlign:'center',
265.             items:form,
266.             modal:true,
267.             
268.             buttons:[{                          //按钮
269.                 text:'保存',
270.                 handler:(function(){//start function按钮处理函数
271.                     if(form.getForm().isValid()){//表单是否通过交验，通过责提交表单，否则弹出错误窗口
272.                         form.getForm().submit({
273.                             scope:this,
274.                             waitMsg:'保存数据...',
275.                             success:function(form,action){
276.                                 Ext.MessageBox.alert('消息：','保存成功');
277.                                 this.grid.store.reload();
278.                                 this.window.close() ;
279.                             },
280.                             failure:function(form,action){
281.                                 Ext.MessageBox.alert('有错误:', action.result.errors);
282.                                 this.window.close() ;
283.                             }
284.                         });
285.                     }else{
286.                         Ext.MessageBox.alert('有错误：','表单填写由错误！');
287.                     }
288.                     
289.                 }).createDelegate(this)//end function               
290.             },{
291.                 text:'重置',
292.                 handler:function(){//start function按钮处理函数
293.                     form.getForm().reset();
294.                 }//end function 
295.             }]
296.         });//end Ext.Window
297. 
     
298.         //显示窗口
299.         this.window.show();
300.     },
301.     /**
302.      * 添加列表新数据的函数
303.      */
304.     newInfo:function(){//start newTableInfo
305.         this.formWindow(this.getForm(),'添加');       
306.     },//end newTableInfo
307.     /**
308.      * 删除数据，并把此数据的唯一标识码发送到后台
309.      */
310.     handlerDelete:function(){//start deleteRecord
311.         this.sendId(this.deleteUrl);
312.         
313.     },//end deleteRecord
314.     sendId:function(url){//start deleteRecord
315.         var ids=new Array();                //存放uniqueCode的数组
316.         var records=this.grid.selModel.selections.items;//grid中被选择的数据，类型为Array
317.         for(var i = 0, len = records.length; i < len; i++){
318.             ids[ids.length]=records[i].id;  //把数据id赋予ids数组中
319.         }
320.         Ext.Ajax.request({                  //调用Ajax发送请求到后台
321.             scope:this,
322.             url:url,                    //删除grid数据的url.
323.             success:function(transport){                //处理成功后返回的函数
324.                 var oXmlDom=transport.responseText;
325.                 if(oXmlDom!=''){
326.                     
327.                     var content=eval(oXmlDom);
328.                     Ext.MessageBox.alert("有错误：",content.errors)
329.                 }else{
330.                     this.grid.store.reload();       //重新加载grid中的数据
331.                 }
332.             },
333.             failure:function(){             //处理后台删除失败的函数
334.                 Ext.MessageBox.alert('消息','删除失败!');
335.             }
336.         });
337.         
338.     },//end deleteRecord
339.     exportExcel:function(){
340.         document.location.href='http://localhost:8080/chalk/hf/sortManager.do?action=export';
341.     }
342. }

下面是使用前要再加的 js ,主要是处理一些ext2.0一些效果，不加也可以，不过可能会少些效果

 

1. //填充图片的本地应用
2. Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif';
3. //在ie中默认的宽度不够
4. Ext.apply(Ext.MessageBox,{
5.     alert:function(title, msg, fn, scope){
6.         this.show({
7.             title : title,
8.             msg : msg,
9.             buttons: this.OK,
10.             minWidth:200,
11.             fn: fn,
12.             scope : scope
13.         });
14.         return this;
15.     }
16. });
17. Ext.menu.RangeMenu.prototype.icons = {
18.       gt: '../resources/extendIamges/greater_then.png', 
19.       lt: '../resources/extendIamges/less_then.png',
20.       eq: '../resources/extendIamges/equals.png'
21. };
22. Ext.grid.filter.StringFilter.prototype.icon = '../resources/extendIamges/find.png';
23. 
    
24. /* 
25.  * 修改filter发送到后台的数据模式.
26.  * 例:filter.[i][field]、filter.[i][type]、filter.[i][value]、filter.[i][comparison]、
27.  * 
28.  */
29. 
    
30. Ext.grid.GridFilters.prototype.buildQuery=function(filters){
31.     var p = {};
32.         for(var i=0, len=filters.length; i<len; i++) {
33.             var f = filters[i];
34.             var root = [this.paramPrefix, '[', i, ']'].join('');
35.             p[root + '[field]'] = f.field;
36.             //修改此处
37.             var dataPrefix = root;
38.             for(var key in f.data) {
39.                 p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];
40.       }
41.         }
42.         
43.     return p;
44. }
45. 
    
46. //添加时间交验函数
47. Ext.apply(Ext.form.VTypes, {    
48.     //时间交验属性
49.     daterange: function(val, field) {
50.         var date = field.parseDate(val);
51.         
52.         var dispUpd = function(picker) {
53.           var ad = picker.activeDate;
54.           picker.activeDate = null;
55.           picker.update(ad);
56.         };
57. 
    
58.         //debugger;
59.         if (field.startDateField) {
60.           var sd = field.startDateField;
61.           sd.maxValue = date;
62.           if (sd.menu && sd.menu.picker) {
63.             sd.menu.picker.maxDate = date;
64.             dispUpd(sd.menu.picker);
65.           }
66.         } else if (field.endDateField) {
67.           var ed = field.endDateField;
68.           ed.minValue = date;
69.           if (ed.menu && ed.menu.picker) {
70.             ed.menu.picker.minDate = date;
71.             dispUpd(ed.menu.picker);
72.           }
73.         }
74. 
    
75.         return true;
76.   }
77. });
78. Ext.QuickTips.init();

此代码中可能会用到之前的radio和checkbox校代码

这里也随便贴出来

1. /**
2.  * 此js为补充Extjs的chechbox和radio校验
3.  * 
4.  * checkbox需要添加属性：
5.  * showInvalidText：Boolean 
6.  * 此属性为标识出在那个checkbox后面添加错误图片
7.  * 注意：boxLabel需要两个字符不然图片会合字重叠，可以在字符后加一空格' '
8.  * 
9.  * radio需要添加属性：
10.  * showInvalidText：Boolean 
11.  * 此属性为标识出在那个radio后面添加错误图片
12.  */
13. 
    
14. Ext.apply(Ext.form.Checkbox.prototype, {
15.     getErrorCt:function(){
16.         return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
17.             this.el.findParent('.x-form-field-wrap', 5, true);   // else direct field wrap
18.     }
19. });
20. 
    
21. Ext.apply(Ext.form.Radio.prototype, {
22.     getErrorCt:function(){
23.         return this.el.findParent('.x-form-element', 5, true) || // use form element wrap if available
24.             this.el.findParent('.x-form-field-wrap', 5, true);   // else direct field wrap
25.     }
26. });
27. 
    
28. function markInvalid(msg){
29.     if (!this.rendered || this.preventMark) { // not rendered
30.         return;
31.     }
32.     this.el.addClass(this.invalidClass);
33.     msg = msg || this.invalidText;
34.     switch (this.msgTarget) {
35.         case 'qtip' :
36.             this.el.dom.qtip = msg;
37.             this.el.dom.qclass = 'x-form-invalid-tip';
38.             if (Ext.QuickTips) { // fix for floating editors interacting with
39.                                     // DND
40.                 Ext.QuickTips.enable();
41.             }
42.             break;
43.         case 'title' :
44.             this.el.dom.title = msg;
45.             break;
46.         case 'under' :
47.             if (!this.errorEl) {
48.                 var elp = this.getErrorCt();
49.                 this.errorEl = elp.createChild( {
50.                     cls : 'x-form-invalid-msg'
51.                 });
52.                 this.errorEl.setWidth(elp.getWidth(true) - 20);
53.             }
54.             this.errorEl.update(msg);
55.             Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
56.             break;
57.         case 'side' :
58.             if (!this.showInvalidText) {
59.                 break;
60.             }
61. 
    
62.             if (!this.errorIcon) {
63.                 var elp = this.getErrorCt();
64.                 this.errorIcon = elp.createChild( {
65.                     cls : 'x-form-invalid-icon'
66.                 });
67.             }
68.             this.errorIcon.alignTo(this.el.next(), 'tl-tr', [2, 0]);
69.             this.errorIcon.dom.qtip = msg;
70.             this.errorIcon.dom.qclass = 'x-form-invalid-tip';
71.             this.errorIcon.show();
72.             this.on('resize', this.alignErrorIcon, this);
73.             break;
74.         default :
75.             var t = Ext.getDom(this.msgTarget);
76.             t.innerHTML = msg;
77.             t.style.display = this.msgDisplay;
78.             break;
79.     }
80.     this.fireEvent('invalid', this, msg);
81. }
82. 
    
83. function clearInvalid(){
84.     if (!this.rendered || this.preventMark) { // not rendered
85.         return;
86.     }
87.     this.el.removeClass(this.invalidClass);
88.     switch (this.msgTarget) {
89.         case 'qtip' :
90.             this.el.dom.qtip = '';
91.             break;
92.         case 'title' :
93.             this.el.dom.title = '';
94.             break;
95.         case 'under' :
96.             if (this.errorEl) {
97.                 Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
98.             }
99.             break;
100.         case 'side' :
101.             if (this.errorIcon) {
102.                 this.errorIcon.dom.qtip = '';
103.                 this.errorIcon.hide();
104.                 this.un('resize', this.alignErrorIcon, this);
105.             }
106.             break;
107.         default :
108.             var t = Ext.getDom(this.msgTarget);
109.             t.innerHTML = '';
110.             t.style.display = 'none';
111.             break;
112.     }
113.     this.fireEvent('valid', this);
114. }
115. 
     
116. function validate(){
117.     var array = this.ownerCt.find('name', this.name);
118.     if (this.validateValue(this.processValue(this.getRawValue()))) {
119.         for(var i=0;i<array.length;i++){
120.             array[i].clearInvalid();
121.         }
122.         return true;
123.     }
124.     return false;
125. }
126. 
     
127. function validateValue() {
128.     if (!this.getGroupValue()) {
129.         this.markInvalid();
130.         return false;
131.     }
132.     return true;
133. }
134. 
     
135. Ext.form.Checkbox.prototype.markInvalid=Ext.form.Radio.prototype.markInvalid = markInvalid;
136. 
     
137. Ext.form.Checkbox.prototype.clearInvalid=Ext.form.Radio.prototype.clearInvalid = clearInvalid;
138. 
     
139. Ext.form.Checkbox.prototype.validate=Ext.form.Radio.prototype.validate = validate;
140. 
     
141. Ext.form.Checkbox.prototype.validateValue=function(){
142.     var array = this.ownerCt.find('name', this.name);
143.     
144.     for(var i=0;i<array.length;i++){
145.         if(array[i].getValue()){
146.             return true;
147.         }
148.     }
149.     this.markInvalid();
150.     return false;
151. }
152. 
     
153. Ext.form.Radio.prototype.validateValue = validateValue;

0

0

0