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.效果图