自定义报表之动态列(Ext3.0)

客户需求：自定义算法对原始数据进行一定的运算，自己定制报表的显示列

首先一个panel来展示报表的选择以及起始、结束日期，然后展示报表grid

以下代码主要实现动态列：

var reportId=""; var deviceKpiInfo_cm; var deviceKpiInfo_ds; function searchReportShow(){ var reportId = report_for_show.getValue(); var cm; var field; Ext.Ajax.request({ url : 'report.htm?method=getCm', params : { ID : reportId }, success : function(response,options) { cm=response.responseText; Ext.Ajax.request({ url : 'report.htm?method=getField', params : { ID : reportId }, success : function(response,options) { field=response.responseText; deviceKpiInfo_cm = new Ext.grid.ColumnModel(Ext.util.JSON.decode("["+"new Ext.grid.RowNumberer()"+","+cm+"]")); deviceKpiInfo_ds = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ url : 'report.htm?method=getReportData' }), reader : new Ext.data.JsonReader({ root : 'rows' },Ext.util.JSON.decode("["+field+"]")) }); showGrid(); deviceKpiInfo_ds.load({ params : { start : 0, limit : 20, ID:reportId, START_TIME:Ext.getCmp('REPORT_SHOW_START_TIME').getRawValue(), END_TIME:Ext.getCmp('REPORT_SHOW_END_TIME').getRawValue() } }); }, failure : function() { Ext.Msg.show({ title : error_title, msg : delete_error_msg, buttons : Ext.Msg.OK, icon : Ext.Msg.ERROR }); } }); }, failure : function() { Ext.Msg.show({ title : error_title, msg : delete_error_msg, buttons : Ext.Msg.OK, icon : Ext.Msg.ERROR }); } }); }; var btn_search_reportShow = new Ext.Button({ text : search, iconCls : 'icon-search', handler : function(){searchReportShow();} }); var ds_report_select = new Ext.data.Store({ url : 'report.htm?method=queryWithNoPage', reader : new Ext.data.JsonReader({root : 'rows'}, [{name : 'ID'}, {name : 'BUSINESS_TYPE'}, {name : 'REPORT_CODE'}, {name : 'REPORT_NAME'}, {name : 'NOTE'}]) }); var report_for_show = new Ext.form.ComboBox({ name : 'REPORT', width : 90, maxLength : 100, valueField : 'ID', displayField : 'REPORT_NAME', editable : false, selectOnFocus : true, mode : 'remote', store : ds_report_select, triggerAction : 'all', loadingText : '加载中...', fieldLabel : '报表' }); var text_start_time_reportShow = new Ext.form.DateField({ fieldLabel:'Fecha Inicio', id : 'REPORT_SHOW_START_TIME', name : 'START_TIME', allowBlank:false, width:110, altFormats: 'Y-m-d H:i:s', format:'Y-m-d H:i:s', emptyText:'Select a date...', listeners : { 'specialkey' : function(field, e) { if (e.getKey() == Ext.EventObject.ENTER) { searchReportShow(); } } } }); var text_end_time_reportShow = new Ext.form.DateField({ fieldLabel:'Fecha Inicio', id : 'REPORT_SHOW_END_TIME', name : 'END_TIME', allowBlank:false, width:110, altFormats: 'Y-m-d H:i:s', format:'Y-m-d H:i:s', emptyText:'Select a date...', listeners : { 'specialkey' : function(field, e) { if (e.getKey() == Ext.EventObject.ENTER) { searchReportShow(); } } } }); var reportShow_panel=new Ext.Panel({ id:'reportShow', width: 700, height: 400, layout : 'card', region : 'center', title: '性能监控', activeItem : 0, tbar : [btn_search_reportShow ,'-', '报表名称', report_for_show, '起始时间:', text_start_time_reportShow,new Ext.Toolbar.TextItem(""),'结束时间:',text_end_time_reportShow,new Ext.Toolbar.TextItem("")], items:[] }); function showGrid(){ var grid_reportShow = new Ext.grid.GridPanel({ id:'gridReportShow', loadMask : {msg : data_loading}, region : 'center', width:600, height:300, ds : deviceKpiInfo_ds, cm : deviceKpiInfo_cm, viewConfig : { forceFit : true }, bbar : new Ext.PagingToolbar({ pageSize : 15, store : deviceKpiInfo_ds, displayInfo : true, displayMsg : '显示第 {0} 条到 {1} 条记录，共 {2} 条', emptyMsg : "没有记录" }) }); Ext.getCmp('reportShow').add(grid_reportShow); Ext.getCmp('reportShow').layout.setActiveItem('gridReportShow'); }; var p_reportShow = { id : 'reportShow-panel', border : false, layout : 'border', items : [reportShow_panel] };

效果图：