[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
本文地址：http://blog.csdn.net/sushengmiyan/article/details/42240531
本文作者：sushengmiyan
------------------------------------------------------------------------------------------------------------------------------------
本文以一个实际例子，使用了extjs的gridpanel中的分组统计显示功能，涉及知识点：
Ext.grid.Panel model/store store中的data grid中的features以及其中ftype: 'groupingsummary'等
一、先看效果图：
可以看到图片显示的安装月份进行了分组显示 在每个分组下面会有合计和平均值显示。我这个例子在IE8和谷歌浏览器以及火狐浏览器下均正常显示。
二、贴上所有的代码(其实就只有一个jsp页面就足够了)
<%@ page contentType="text/html; charset=UTF-8" %>
<%
String context = request.getContextPath();
%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>报表</title>
<script type="text/javascript">
window.context = "<%=context%>";
</script>
<script type="text/javascript" src="<%=context %>/extjs5/include-ext.js"></script>
<script type="text/javascript" src="<%=context %>/extjs5/packages/ext-locale/build/ext-locale-zh_CN.js"></script>
<script type="text/javascript" src="<%=context %>/app/ux/Month.js"></script>
</head>
<body>
<script type="text/javascript" > Ext.onReady(function(){
var data = [{
factory:'第一家维修公司', date:'2014-05', cost:52492.0, costav:52492.0
},{
factory:'第二家维修公司', date:'2014-05', cost:760.0, costav:760.0
},{
factory:'第三家维修公司', date:'2014-05', cost:1807.0, costav:1807.0
},{
factory:'第一家维修公司', date:'2014-06', cost:4921.0, costav:4921.0
},{
factory:'第二家维修公司', date:'2014-06', cost:1020.0, costav:1020.0
},{
factory:'第三家维修公司', date:'2014-06', cost:1637.0, costav:1637.0
},{
factory:'第一家维修公司', date:'2014-07', cost:48150.0, costav:48150.0
},{
factory:'第二家维修公司', date:'2014-07', cost:7940.0, costav:7940.0}]; var store = Ext.create('Ext.data.Store', {
fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}],
groupField: 'date',
data: data
}); var grid = Ext.create('Ext.grid.Panel', {
frame: true,
height: 800,
columnLines: true, // 加上表格线
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',
hideGroupedHeader: false,
enableGroupingMenu: false
}, {
ftype: 'summary',
summaryType: 'average',
dock: 'bottom'
}],
renderTo: Ext.getBody(),
columns: [{
text: '维修时间', dataIndex: 'date',width:100,
summaryRenderer: function(value, summaryData, dataIndex) {
return '合计'}
},{
text: '维修费用(元)', dataIndex: 'cost', width:180,
field: { xtype: 'numberfield'},
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' 元'},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
},{
text: '维修厂家', dataIndex: 'factory',width:120,
summaryRenderer: function(value, summaryData, dataIndex) {
return '平均值'}
},{
text: '', dataIndex: 'costav', width:180,
field: {xtype: 'numberfield'},
summaryType: 'average',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return ''},//这列最后显示平均值 暂时这样转换显示
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
}],
store: store
});
grid.show();
});
</script>
</body>
</html>
这个随便起名一个jsp就可以啦。
里面使用了一个日期选择控件，只可以选择年月的。顺便也贴一下代码吧
/** Months picker
重写 field.Date
**/
Ext.define('app.ux.Month', {
extend:'Ext.form.field.Date',
alias: 'widget.monthfield',
requires: ['Ext.picker.Month'],
alternateClassName: ['Ext.form.MonthField', 'Ext.form.Month'],
selectMonth: null,
createPicker: function() {
var me = this,
format = Ext.String.format;
return Ext.create('Ext.picker.Month', {
pickerField: me,
ownerCt: me.ownerCt,
renderTo: document.body,
floating: true,
hidden: true,
focusOnShow: true,
minDate: me.minValue,
maxDate: me.maxValue,
disabledDatesRE: me.disabledDatesRE,
disabledDatesText: me.disabledDatesText,
disabledDays: me.disabledDays,
disabledDaysText: me.disabledDaysText,
format: me.format,
showToday: me.showToday,
startDay: me.startDay,
minText: format(me.minText, me.formatDate(me.minValue)),
maxText: format(me.maxText, me.formatDate(me.maxValue)),
listeners: {
select: { scope: me, fn: me.onSelect },
monthdblclick: { scope: me, fn: me.onOKClick },
yeardblclick: { scope: me, fn: me.onOKClick },
OkClick: { scope: me, fn: me.onOKClick },
CancelClick: { scope: me, fn: me.onCancelClick }
},
keyNavConfig: {
esc: function() {
me.collapse();
}
}
});
},
onCancelClick: function() {
var me = this;
me.selectMonth = null;
me.collapse();
},
onOKClick: function() {
var me = this;
if( me.selectMonth ) {
me.setValue(me.selectMonth);
me.fireEvent('select', me, me.selectMonth);
}
me.collapse();
},
onSelect: function(m, d) {
var me = this;
me.selectMonth = new Date(( d[0]+1 ) +'/1/'+d[1]);
}
});
/** Months picker **/
知识点梳理：
①。显示的数据，这里整理好了一些数据，在实际中，我们可以通过查询数据库获取，分组查询便可。
var data = [{
factory:'第一家维修公司', date:'2014-05', cost:52492.0, costav:52492.0
},{
factory:'第二家维修公司', date:'2014-05', cost:760.0, costav:760.0
},{
factory:'第三家维修公司', date:'2014-05', cost:1807.0, costav:1807.0
},{
factory:'第一家维修公司', date:'2014-06', cost:4921.0, costav:4921.0
},{
factory:'第二家维修公司', date:'2014-06', cost:1020.0, costav:1020.0
},{
factory:'第三家维修公司', date:'2014-06', cost:1637.0, costav:1637.0
},{
factory:'第一家维修公司', date:'2014-07', cost:48150.0, costav:48150.0
},{
factory:'第二家维修公司', date:'2014-07', cost:7940.0, costav:7940.0}];
②store数据交互
var store = Ext.create('Ext.data.Store', {
fields: [{name: 'date'}, {name: 'cost'},{name: 'costav'},{name: 'factory'}],
groupField: 'date',
data: data
});
这里只需要指定一个groupField就可以了，只需要这一步。
③。grid主体
var grid = Ext.create('Ext.grid.Panel', {
frame: true,
height: 800,
columnLines: true, // 加上表格线
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',
hideGroupedHeader: false,
enableGroupingMenu: false
}, {
ftype: 'summary',
summaryType: 'average',
dock: 'bottom'
}],
renderTo: Ext.getBody(),
columns: [{
text: '维修时间', dataIndex: 'date',width:100,
summaryRenderer: function(value, summaryData, dataIndex) {
return '合计'}
},{
text: '维修费用(元)', dataIndex: 'cost', width:180,
field: { xtype: 'numberfield'},
summaryType: 'sum',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return value + ' 元'},
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
},{
text: '维修厂家', dataIndex: 'factory',width:120,
summaryRenderer: function(value, summaryData, dataIndex) {
return '平均值'}
},{
text: '', dataIndex: 'costav', width:180,
field: {xtype: 'numberfield'},
summaryType: 'average',
renderer: function(value, metaData, record, rowIdx, colIdx, store, view){
return ''},//这列最后显示平均值 暂时这样转换显示
summaryRenderer: function(value, summaryData, dataIndex) {
return value + ' 元'}
}],
store: store
});
这里需要注意，1.需要给grid指定高度，如果不指定IE8下数据不显示,应该是个bug吧。
2.分组以及统计的关键
features: [{
id: 'group',
ftype: 'groupingsummary',//分组统计，可以选择不分组的，各类型可以去API查找
groupHeaderTpl: '{name}'+'月份车辆美容及维修费用',//标题而已
hideGroupedHeader: false,
enableGroupingMenu: false
}, {
ftype: 'summary',//下方的汇总的
summaryType: 'average',//类型是求平均值，还有sum等，可以去API查找
dock: 'bottom'
}],
OK
就这样设置，就可以简单的实现一个分组报表统计了，有求平均值求和等方法。简单易用
[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总的更多相关文章
- [ExtJS5学习笔记]第三十一节 sencha extjs 5使用cmd生成的工程部署到tomcat服务器
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42940883 本文作者:sushengmiyan ------------------ ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
- [ExtJS5学习笔记]第三十五条 sencha extjs 5 组件查询方法
一UI前部组件势必更加,我们通常习惯性使用ID获取部件操作的需要.但是,这种方法是extjs推荐么?你有吗extjs利用它来获取组件的推荐方法? 夹 文件夹 extjs的查询组件的API 查询实例 主 ...
- [extjs5学习笔记]第三十八节 sencha CMD 6.0.0.220版本安装
本文地址:http://blog.csdn.net/sushengmiyan/article/details/46740381 简介 sencha cmd 6安装过程不需要UAC控制了对于widnow ...
- [ExtJS5学习笔记]第三十五节 sencha extjs 5 组件查询方法总结
一个UI前台组件肯定会比较多,我们通常习惯性的使用ID来获取需要操作的组件,但是这种方法是extjs推荐的么?有没有extjs推荐使用的获取组件的方法呢? 目录 目录 extjs的查询组件的API 查 ...
- [ExtJS5学习笔记]第三十四节 sencha extjs 5 grid表格之java后台导出excel
继上次使用js前端导出excel之后,还有一个主要大家比较关注的是后台实现导出excel,因为本人开发使用的java所以这里使用apache的开源项目poi进行后台excel的导出. 本文目录 本文目 ...
- [ExtJS5学习笔记]第三十六节 报表组件mzPivotGrid
mzPivotGrid 是一个报表组件,采用这个组件之后,可以令你的应用体现更多的价值. 什么是pivot grid 什么是mzPivotGrid 学习资源 与图表组件的融合 什么是pivot gri ...
- [extjs5学习笔记]第三十七节 Extjs6预览版都有神马新东西
本文在微信公众号文章地址:微信公众号文章地址 本文地址:http://blog.csdn.net/sushengmiyan/article/details/45190485 [TOC] 在Ext JS ...
- [ExtJS5学习笔记]第三十二节 sencha extjs 5与struts2的ajax交互配置
本文地址:http://blog.csdn.net/sushengmiyan/article/details/43487751 本文作者:sushengmiyan ------------------ ...
随机推荐
- [HNOI2004]L语言
题目描述 标点符号的出现晚于文字的出现,所以以前的语言都是没有标点的.现在你要处理的就是一段没有标点的文章. 一段文章T是由若干小写字母构成.一个单词W也是由若干小写字母构成.一个字典D是若干个单词的 ...
- 线性规划与网络流24题●09方格取数问题&13星际转移问题
●(做codevs1908时,发现测试数据也涵盖了1907,想要一并做了,但因为“技术”不佳,搞了一上午) ●09方格取数问题(codevs1907 方格取数3) 想了半天,也没成功建好图: 无奈下 ...
- ●BZOJ 2839 集合计数
题链: http://www.lydsy.com/JudgeOnline/problem.php?id=2839 题解: 容斥原理 真的是神题!!! 定义 f[k] 表示交集大小至少为 k时的方案数怎 ...
- hdu 5592 BestCoder Round #65（树状数组）
题意: ZYB有一个排列PP,但他只记得PP中每个前缀区间的逆序对数,现在他要求你还原这个排列. (i,j)(i < j)(i,j)(i<j)被称为一对逆序对当且仅当A_i>A_jA ...
- [Spoj]Counting Divisors (cube)
来自FallDream的博客,未经允许,请勿转载,谢谢. 设d(x)表示x的约数个数,求$\sum_{i=1}^{n}d(i^{3})$ There are 5 Input files. - Inpu ...
- Mybatis整合Spring实现事务管理的源码分析
一:前言 没有完整看完,但是看到了一些关键的地方,这里做个记录,过程会有点乱,以后逐渐补充最终归档为完整流程:相信看过框架源码的都知道过程中无法完全确定是怎样的流程,毕竟不可能全部都去测试一遍 ,但是 ...
- 【iOS】苹果开发者账号申请
[1]首先登陆苹果开发者中心:https://developer.apple.com/programs/ 如图有一个按钮enroll,意思是苹果开发者报名(说白了就是要交钱,好让你具备APP测试和上线 ...
- C++11的原子量与内存序浅析
一.多线程下共享变量的问题 在多线程编程中经常需要在不同线程之间共享一些变量,然而对于共享变量操作却经常造成一些莫名奇妙的错误,除非老老实实加锁对访问保护,否则经常出现一些(看起来)匪夷所思的情况.比 ...
- Python作业之三次登陆锁定用户
作业之三次登陆锁定用户 作业要求如下: 1. 输入用户名和密码 2. 认证成功提示欢迎信息 3. 认证失败三次锁定用户 具体代码如下: 方法1: import os#导入os模块 if os.path ...
- 谷歌发布 TensorFlow Lite [官方网站，文档]
机器学习社区:http://tensorflow123.com/ 简介 TensorFlow Lite TensorFlow Lite 是 TensorFlow 针对移动和嵌入式设备的轻量级解决方案. ...