SouchTouch JS 报表显示分页、锁定左侧列

最近公司移动端app项目需要做一个报表

技术需求：涉及extjs和souchTouch，主要使用Ext.grid.GridView和Ext.grid.plugin.SummaryRowView实现

功能设计：

1. 无需查询条件，在移动端上新增一个报表菜单，欠费报表
2. 欠费统计表列：小区、楼、单元、室、客户名称、客户类型、联系电话、用热状态、采暖面积、年数、总金额、xxxx-xxxx（2017-2016）欠，xxxx-xxxx欠.......、黑名单性质、催缴记录

     3.需要合计统计列，按每列分开统计，统计列：欠费总金额、xxxx-xxxx欠，xxxx-xxxx欠......

开发接口调用： xxxxxxx.java中的processQueryOweUncalledCustomer

代码实现：

1.view部分

Ext.define('app.arrearStatistics.arrearsReportView', {extend : 'Ext.Container',id : 'arrearsReportView',xtype : 'arrearsReportView',requires : ['app.arrearStatistics.arrearsReportLeftGrid','app.arrearStatistics.arrearsReportRightGrid'],config : {layout : 'hbox',title : '欠费报表',store : 'arrearsReportStore',items : [{xtype : "panel",layout : 'hbox',flex : 1,items : [{xtype : "arrearsReportLeftGrid",width : '100px',zIndex : 1}, {xtype : "arrearsReportRightGrid",flex : 1}]}]}});

2.store部分

Ext.define('app.arrearStatistics.arrearsReportStore', {extend : 'app.lib.ext.zoomkey.listStore',config : {sorters : [{property : 'id',direction : 'ASC'}],pageSize : 10,//每页显示的条数storeId : 'arrearsReportStore',fields : ["areaName", 'buildingNo', "houseNo", "roomNo","cusName","cusTypeName","mobile","heatStatus","heatingArea","yearSum","oweMoneySum","blackType" , "2016-2017_", "2015-2016_", "2014-2015_", "2013-2014_","2012-2013_", "2011-2012_", "2010-2011_"],proxy : getProxy('/app.ao?method=processQueryOweUncalledCustomer')}});

3.LeftGrid、RightGrid

Ext.define('app.arrearStatistics.arrearsReportLeftGrid', {extend : 'Ext.grid.Grid',xtype : 'arrearsReportLeftGrid',id : 'arrearsReportLeftGrid',config : {titleBar : false,store : 'arrearsReportStore',isHideMask : true,plugins : [{xclass : 'Ext.grid.plugin.SummaryRow',docked : 'bottom'},{//更多页加载loadMoreText : '显示更多',noMoreRecordsText : '没有更多',////autoPaging : true,xclass : 'Ext.plugin.ListPaging'}],scrollable : {// 滚动效果动量大小momentumEasing : {// 动量设置momentum : {acceleration : 30,friction : 0.5},// 反弹效果bounce : {acceleration : 0.0001,springTension : 0.9999}},// 滚动超出页面范围outOfBoundRestrictFactor : 0,// 隐藏滚动条样式indicators : false},listeners : {initialize : function() {var leftScroller = Ext.getCmp('arrearsReportLeftGrid').getScrollable().getScroller();leftScroller.on({scroll : function(scoll, x, y) {// 滚动右边的滚动条var rightList = Ext.getCmp('arrearsReportRightGrid');var rightListScroll = rightList.getScrollable().getScroller();// 屏蔽右侧grid的x轴滚动rightListScroll.scrollTo(null, y);},scope : this});},itemtap : function(dataView, index) {var rightList = Ext.getCmp('arrearsReportRightGrid');rightList.select(index);}},columns : [{id : 'arrearsReportLeftColumn',text : '客户名称',sortable : false,dataIndex :'cusName',//xtype : 'templatecolumn',summaryType : 'sum',width : 100,summaryRenderer : function(value) {return '合计';}}]}});

Ext.define('app.arrearStatistics.arrearsReportRightGrid', {extend : 'Ext.grid.Grid',xtype : 'arrearsReportRightGrid',id : 'arrearsReportRightGrid',config : {titleBar : false,store : 'arrearsReportStore',isHideMask : true,plugins : [{xclass : 'Ext.grid.plugin.SummaryRow',docked : 'bottom'},{xclass : 'Ext.plugin.ListPaging',loadMoreText : '',noMoreRecordsText : ''////,////autoPaging : true}],scrollable : {// 滚动效果动量大小momentumEasing : {// 动量设置momentum : {acceleration : 30,friction : 0.5},// 反弹效果bounce : {acceleration : 0.0001,springTension : 0.9999}},// 滚动超出页面范围outOfBoundRestrictFactor : 0},listeners : {initialize : function() {var rightScroller = Ext.getCmp('arrearsReportRightGrid').getScrollable().getScroller();rightScroller.on({scroll : function(scoll, x, y) {// 滚动左边的滚动条var leftList = Ext.getCmp('arrearsReportLeftGrid');var leftListScroll = leftList.getScrollable().getScroller();// 同步左侧grid的y轴滚动，屏蔽x轴滚动leftListScroll.scrollTo(null, y);},scope : this});},itemtap : function(dataView, index) {var leftList = Ext.getCmp('arrearsReportLeftGrid');leftList.select(index);}},columns : [{text: '小区',dataIndex: 'areaName',width :100},{text: '楼',dataIndex: 'buildingNo',width : 100},{text: '单元',dataIndex: 'houseNo',width : 100},{text: '室',dataIndex: 'roomNo',width : 100},{text: '客户类型',dataIndex: 'cusTypeName',width : 100},{text: '联系电话',dataIndex: 'mobile',width : 150},{text: '用热状态',dataIndex: 'heatStatus',width : 100},{text: '采暖面积',dataIndex: 'heatingArea',width : 150},{text: '年数',dataIndex: 'yearSum',width : 100},{text: '总额',dataIndex: 'oweMoneySum',width : 150,summaryType : 'sum',summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '黑名单',dataIndex: 'blackType',width : 150},{text: '2016-2017欠',dataIndex: '2016-2017_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '2015-2016欠',dataIndex: '2015-2016_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '2014-2015欠',dataIndex: '2014-2015_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '2013-2014欠',dataIndex: '2013-2014_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '2012-2013欠',dataIndex: '2012-2013_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}},{text: '2011-2012欠',dataIndex: '2011-2012_',summaryType : 'sum',width : 150,summaryRenderer : function(value) {return zeroFormat(value);},renderer : function(value) {return zeroFormat(value);}}]}});

4.app.js文件中记得注册声明

'Ext.grid.plugin.SummaryRow'

'app.arrearStatistics.arrearsReportView'

'app.arrearStatistics.arrearsReportStore'

5.数据处理：保留2位小数，0或者undefined显示“-”

function zeroFormat(value){var valueTwo;if(value == 0 || value == undefined){valueTwo = '-';}else{valueTwo = value.toFixed(2);}return valueTwo;}

6.效果图