lkj107 发表于 2013-1-23 02:14:41

自定义报表之动态列(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 : ,      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 : };
效果图:
http://p.blog.csdn.net/images/p_blog_csdn_net/lkj107/EntryImages/20091117/%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8A%A5%E8%A1%A8.GIF
页: [1]
查看完整版本: 自定义报表之动态列(Ext3.0)