ext (增 ，删，改 ，查，导出excel)
下面为扩张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.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=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.、filter.、filter.、filter.、 * */Ext.grid.GridFilters.prototype.buildQuery=function(filters){ var p = {}; for(var i=0, len=filters.length; i<len; i++) { var f = filters; var root = '].join(''); p'] = f.field; //修改此处 var dataPrefix = root; for(var key in f.data) { p['].join('')] = f.data; } } 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; } });
页:
[1]