最近公司移动端app项目需要做一个报表
技术需求:涉及extjs和souchTouch,主要使用Ext.grid.GridView和Ext.grid.plugin.SummaryRowView实现
功能设计:
- 无需查询条件,在移动端上新增一个报表菜单,欠费报表
- 欠费统计表列:小区、楼、单元、室、客户名称、客户类型、联系电话、用热状态、采暖面积、年数、总金额、xxxx-xxxx(2017-2016)欠,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.效果图