ext (增 ，删，改 ，查，导出excel)

qinya06

下面为扩张grid的 代码/** * @auther qinya* @class   Ext.ux.GridExtend * 通用的grid */ Ext.ux.GridExtend=function(config){     Ext.QuickTips.init();     this.config=config;    this.filters=this.config.filters||'';               /**      * @param {String}      * 显示列表的id      */     this.el=this.config.el||document.body;     /**      * @param   {String}      * 读取编辑数据的form的url      */     this.editUrl=this.config.editUrl;     /**      * @param   {String}      * 读取编辑数据的form的url      */     this.deleteUrl=this.config.deleteUrl;     /**      * @param   {String}      * 读取列表数据的url      */     this.storeUrl=this.config.storeUrl;     /**      * @param   {String}      * 保存添加到列表数据的url      */     this.formSaveUrl=this.config.formSaveUrl;     /**      * @param   {String}      * 列表的标题      */     this.title=this.config.title||'';     /**      * @param   {Array}      * 列表顶部状态栏      */     this.tbar=this.config.tbar||[{//grid顶部栏位             text:'添加',                  //按钮的名称             tooltip:'添加数据',             //鼠标停留在按钮上的提示             iconCls:'add',                  //按钮图表的类             handler:this.newInfo.createDelegate(this)           //处理按钮被点击时触发的时间函数         },'-',{//'-'为多按钮间隔符             text:'删除',                  //删除按钮的名称             tooltip:'删除数据',             //鼠标停留在按钮上的提示             iconCls:'remove',               //按钮图表的类             handler:this.handlerDelete.createDelegate(this)         //处理按钮被点击时触发的时间函数         },'-',{             text:'导出Excel',                 //删除按钮的名称             tooltip:'导出Excel',              //鼠标停留在按钮上的提示             iconCls:'exportExcel',             handler:this.exportExcel.createDelegate(this)           //处理按钮被点击时触发的时间函数         }];    /**      * @param   选择框对象      */     this.sm=this.config.sm||new Ext.grid.CheckboxSelectionModel({//start Ext.grid.CheckboxSelectionModel         singleSelect:false                  //是否只能选择一个     });     /**      * @param   {Array}      * 列表的栏的前面数据      */     this.cmDataArrayBefore=[//start Ext.grid.ColumnModel         //defaultSortable:true,             //默认情况下为排序         new Ext.grid.RowNumberer(),         //数据函数序列号         this.sm     ];     /**      * @param   {Array}      * 显示的内容是从后台读取出来的数据,所以此数据中的dataIndex属性要与<br>      * 从后台读取的字段要一致      */     this.cmDataArray=this.config.cmDataArray||[];     /**      * @param   {Array}      * 列表的栏的后面数据      */     this.cmDataArrayAfter=this.config.cmDataArrayAfter||[];     /**      * @param   {Ext.grid.ColumnModel}      * 列表的栏位数据      */     this.cm=this.config.cm||new Ext.grid.ColumnModel(             this.cmDataArrayBefore.concat(this.cmDataArray).concat(this.cmDataArrayAfter)     );//end Ext.grid.ColumnModel              /**      * @param   {Array}      * 读取gridStore数据的字段设置数据对象      */     this.gridStoreFields=this.config.gridStoreFields||new Array();          /*      * 如果this.gridStoreFields中没有数据,把this.cmDataArray中的dataIndex的属性值<br>      * 赋予gridStoreFields数组中对象的name属性值      */     if(this.gridStoreFields.length==0){         for(var i=0,len=this.cmDataArray.length;i<len;i++){             this.gridStoreFields={name:this.cmDataArray.dataIndex};         }     }          /**      * @param   {new Ext.data.Store}      * 从后台读取的列表内容      */     this.gridStore=this.config.gridStore||new Ext.data.Store({//start Ext.data.Store         proxy:new Ext.data.HttpProxy({             url:this.storeUrl                   //读取数据的url         }),         reader:new Ext.data.JsonReader({//start Ext.data.JsonReader             root:'rows',                    //存储数据的属性             totalProperty:'results',        //总共的页数             id:'uniqueCode'                 //每行的id值         },                                  //end Ext.data.JsonReader         this.gridStoreFields)     });//end Ext.data.Store          this.gridStore.load({params:{start: 0, limit: 10}});     /**      * @param   {Ext.PagingToolbar}      * 底部状态栏      */     this.bbar=this.config.bbar||new Ext.PagingToolbar({     //在grid底层添加分页工具栏             pageSize:10,                    //显示的数据条数             store:this.gridStore,           //选择翻页按钮时的加载到grid的数据             displayInfo:true,               //设置是否显示分页栏的信息             displayMsg:'显示第 {0} 条到 {1} 条记录，一共 {2} 条',//消息栏的页数信息             emptyMsg:"没有记录"             //当没有记录时要显示的信息         });//end bbar     /**      * 如果要设置此参数必须在cm中设置相应的id      */     this.autoExpandColumn=this.config.autoExpandColumn||'';              /**      * @param   {Object}      * 默认情况下有此显现,如果不需要可以为false      * 必须含有下列参数:<br>      * loadingEL        {String}    加载页面时显示的内容id<br>      * loadingMaskEl    {String}    渐显的内容id<br>      */     this.loadingMark=this.config.loadingMark||{         loadingEL:'loading',         loadingMaskEL:'loading-mask'     };     /**      * @param   {Ext.grid.GridPanel}      * @private      */     this.grid=this.config.gridStore||new Ext.grid.GridPanel({         //el:this.el,                           //显示grid对象的层ID.         store:this.gridStore,                   // grid装载的数据.         viewConfig:{             autoFill:true,             deferEmptyText:'请等待...',             emptyText:'没有数据',             enableRowBody:true         },         sm:this.sm,                             //在每行数据前添加的一组checkBox         height:Ext.get(this.el).getComputedHeight(),         //autoHeight:true,         loadMask:true,         maskDisabled:true,         cm:this.cm,                             //设置栏位.         title:this.title,                       //标题名称.         iconCls:'icon-grid',                //标题前的图片css类         autoExpandColumn:this.autoExpandColumn,         plugins: this.filters,         bbar:this.bbar,         tbar:this.tbar     });          this.formFields=this.config.formFields||new Array();          /**      * 双击数据的事件，弹出一个编辑此条数据的层      * @param   grid        此列表的对象      * @param   rowIndex    在列表中的行数      * @param   e           触发此事件的事件对象      */     this.rowdblclick=this.config.rowdblclick||function(grid, rowIndex, e){         var selectId=this.gridStore.data.items[rowIndex].id;         this.editInfo(selectId);     };     this.grid.on('rowdblclick',this.rowdblclick.createDelegate(this));     this.grid.render(this.el);          //当js加载完毕后删除loading页面并渐显内容     if(this.loadingMark){         setTimeout(function(){             Ext.get(this.loadingMark.loadingEL).remove();             Ext.get(this.loadingMark.loadingMaskEL).fadeOut({remove:true});         }.createDelegate(this), 250);     }    }Ext.ux.GridExtend.prototype={     /**      * 加载 form表单的数据      * @param   selectId    选择此条数据的唯一标识码，此参数发送到后台处理      */     editInfo:function(selectId){         var form=this.getForm();                  form.form.load({//start load 参数设置             url:this.editUrl,             params:{                 uniqueCode:selectId             },             waitMsg:'Loading..'         });//end load 参数设置                  this.formWindow(form,'编辑');     },     getForm:function(){         //错误信息放在右边         Ext.form.Field.prototype.msgTarget = 'side';         //var formSaveUrl=this.formSaveUrl;         //var formFields=this.formFields;         var formSaveUrl=Ext.clone(this.formSaveUrl);         var formFields=Ext.clone(this.formFields);                  //实例化form面板         var form=new Ext.form.FormPanel({//start Ext.form.FormPanel             baseCls:'x-plain',             url:this.formSaveUrl,             frame:true,             id:'form',             items:formFields         });//end Ext.form.FormPanel                  return form;     },     /**      * 装form表单的窗口      * @param   form            要装载的form      * @param   titlePre        标题的前缀      */     formWindow:function(form,titlePre){         //实例化窗口         this.window=new Ext.Window({//start Ext.Window             title:titlePre+'任务列表',             width:500,             height:500,             minWidth:300,             minHeight:300,             layout:'fit',             //closeAction:'hide',             plain:true,             bodyStyle:'padding:5px',             iconCls:'form',             buttonAlign:'center',             items:form,             modal:true,                          buttons:[{                          //按钮                 text:'保存',                 handler:(function(){//start function按钮处理函数                     if(form.getForm().isValid()){//表单是否通过交验，通过责提交表单，否则弹出错误窗口                         form.getForm().submit({                             scope:this,                             waitMsg:'保存数据...',                             success:function(form,action){                                 Ext.MessageBox.alert('消息：','保存成功');                                 this.grid.store.reload();                                 this.window.close() ;                             },                             failure:function(form,action){                                 Ext.MessageBox.alert('有错误:', action.result.errors);                                 this.window.close() ;                             }                         });                     }else{                         Ext.MessageBox.alert('有错误：','表单填写由错误！');                     }                                      }).createDelegate(this)//end function                            },{                 text:'重置',                 handler:function(){//start function按钮处理函数                     form.getForm().reset();                 }//end function             }]         });//end Ext.Window        //显示窗口         this.window.show();     },     /**      * 添加列表新数据的函数      */     newInfo:function(){//start newTableInfo         this.formWindow(this.getForm(),'添加');            },//end newTableInfo     /**      * 删除数据，并把此数据的唯一标识码发送到后台      */     handlerDelete:function(){//start deleteRecord         this.sendId(this.deleteUrl);              },//end deleteRecord     sendId:function(url){//start deleteRecord         var ids=new Array();                //存放uniqueCode的数组         var records=this.grid.selModel.selections.items;//grid中被选择的数据，类型为Array         for(var i = 0, len = records.length; i < len; i++){             ids[ids.length]=records.id; //把数据id赋予ids数组中         }         Ext.Ajax.request({                  //调用Ajax发送请求到后台             scope:this,             url:url,                    //删除grid数据的url.             success:function(transport){                //处理成功后返回的函数                 var oXmlDom=transport.responseText;                 if(oXmlDom!=''){                                          var content=eval(oXmlDom);                     Ext.MessageBox.alert("有错误：",content.errors)                 }else{                     this.grid.store.reload();       //重新加载grid中的数据                 }             },             failure:function(){             //处理后台删除失败的函数                 Ext.MessageBox.alert('消息','删除失败!');             }         });              },//end deleteRecord     exportExcel:function(){         document.location.href='http://localhost:8080/chalk/hf/sortManager.do?action=export';     } } 下面是使用前要再加的 js ,主要是处理一些ext2.0一些效果，不加也可以，不过可能会少些效果 //填充图片的本地应用 Ext.BLANK_IMAGE_URL='../resources/images/default/s.gif'; //在ie中默认的宽度不够 Ext.apply(Ext.MessageBox,{     alert:function(title, msg, fn, scope){         this.show({             title : title,             msg : msg,             buttons: this.OK,             minWidth:200,             fn: fn,             scope : scope         });         return this;     } }); Ext.menu.RangeMenu.prototype.icons = {       gt: '../resources/extendIamges/greater_then.png',       lt: '../resources/extendIamges/less_then.png',       eq: '../resources/extendIamges/equals.png' }; Ext.grid.filter.StringFilter.prototype.icon = '../resources/extendIamges/find.png';/* * 修改filter发送到后台的数据模式. * 例:filter.[field]、filter.[type]、filter.[value]、filter.[comparison]、 * */Ext.grid.GridFilters.prototype.buildQuery=function(filters){     var p = {};         for(var i=0, len=filters.length; i<len; i++) {             var f = filters;             var root = [this.paramPrefix, '[', i, ']'].join('');             p[root + '[field]'] = f.field;             //修改此处             var dataPrefix = root;             for(var key in f.data) {                 p[[dataPrefix, '[', key, ']'].join('')] = f.data[key];       }         }              return p; }//添加时间交验函数 Ext.apply(Ext.form.VTypes, {         //时间交验属性     daterange: function(val, field) {         var date = field.parseDate(val);                  var dispUpd = function(picker) {           var ad = picker.activeDate;           picker.activeDate = null;           picker.update(ad);         };        //debugger;         if (field.startDateField) {           var sd = field.startDateField;           sd.maxValue = date;           if (sd.menu && sd.menu.picker) {             sd.menu.picker.maxDate = date;             dispUpd(sd.menu.picker);           }         } else if (field.endDateField) {           var ed = field.endDateField;           ed.minValue = date;           if (ed.menu && ed.menu.picker) {             ed.menu.picker.minDate = date;             dispUpd(ed.menu.picker);           }         }        return true; } });