gridpanel分组汇总
[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
2015-05-31 86
本文地址：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'
}],
gridpanel分组汇总的更多相关文章
- [ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总
本文地址:http://blog.csdn.net/sushengmiyan/article/details/42240531 本文作者:sushengmiyan ------------------ ...
- MongoDB分组汇总操作，及Spring data mongo的实现
转载请在页首注明作者与出处 一:分组汇总 1.1:SQL样例 分组汇总的应用场景非常多,比如查询每个班级的总分是多少,如果用关系形数据库,那么sql是这样子的 ),class from score g ...
- Grid分组汇总
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext. ...
- 8第八章CTE递归及分组汇总高级部分(多维数据集)(转载)
8第八章CTE递归及分组汇总高级部分(多维数据集) 这里贴图太麻烦...算了 UNION 等集合操作符: UNION 等以第一个 SELECT 的 列明 作为 整个结果集的列明,整个结果集 唯一认可 ...
- tidyverse|数据分析常规操作-分组汇总（sumamrise+group_by)
| 本文首发于 “生信补给站” https://mp.weixin.qq.com/s/tQt0ezYJj3H7x3aWZmKVEQ 使用tidyverse进行简单的数据处理: 盘一盘Tidyverse ...
- 第八章 CTE 递归 及 分组汇总 高级部分(多维数据集)
UNION 等集合操作符: UNION 等以第一个 SELECT 的 列明 作为 整个结果集的列明,整个结果集 唯一认可的 唯一逻辑处理阶段 是 ORDER BY 这个意思是说 只有 ORDER ...
- SQL-26 (二次分组)汇总各个部门当前员工的title类型的分配数目，结果给出部门编号dept_no、dept_name、其当前员工所有的title以及该类型title对应的数目count
题目描述 汇总各个部门当前员工的title类型的分配数目,结果给出部门编号dept_no.dept_name.其当前员工所有的title以及该类型title对应的数目countCREATE TABLE ...
- oracle分析函数系列之sum(col1) over(partition by col2 order by col3):实现分组汇总或递增汇总
语法:sum(col1) over(partition by col2 order by col3 ) 准备数据: DEPT_ID ENAME SAL1 1000 ...
- 关于JDK8对List的分组汇总
1. 跟据某个属性分组OfficeId: Map<String, List<IncomeSumPojo>> collect = list.stream().collect(Co ...
随机推荐
- SharePoint 2010 文档管理系列
前言,这是自己第一次写一个系列的文档,本来想使用SharePoint 2013版本,但是碍于SharePoint 2013对于硬件要求过高,自己的笔记本无法承受,所以退而求其次选择了在SharePoi ...
- 案例分享：电信行业零售业务CRM架构
最近跟一个客户讨论销售领域的移动化需求,谈到了他们的零售业务系统的整体框架,觉得很有分享的必要. 这次聊到的客户是电信行业的巨头,说的是他们的零售业务.电信公司么,卖出去的无非是设备和服务.大体的业务 ...
- Spring(五)AOP简述
一.AOP简述 AOP全称是:aspect-oriented programming,它是面向切面编号的思想核心, AOP和OOP既面向对象的编程语言,不相冲突,它们是两个相辅相成的设计模式型 AOP ...
- 解压缩框架--SSZipArchive
下载地址:https://github.com/ZipArchive/ZipArchive 如果你直接将框架文件夹拖入项目,构建时会出现以下错误 解决方案: 点击+以后会弹出 如果使用cocoaPod ...
- CGContextRef使用简要教程
CGContextRef使用简要教程 Graphics Context是图形上下文,也可以理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个 ...
- 解决log4j:WARN Error initializing output writer. log4j:WARN Unsupported encoding?的问题
异常名:log4j:WARN Error initializing output writer. log4j:WARN Unsupported encoding? 异常截图: 在一般的javaweb项 ...
- Orchard扩展 自定义后台管理导航菜单 Admin Menu
金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径. 看本文需要对Orchard大致体系, 特别是Mo ...
- LightSpeed 之Sql和存储过程的使用
虽然使用LightSpeed提供的Query就可以解决绝大部分问题,但如果业务逻辑过于复杂,有时候还是需要执行SQL语句或者存储过程 用SQL的方式就是使用FindBySql. FindBySql的参 ...
- 存储过程之七—java代码调用
一.简介 jdbc调用存储过程与调用一般的sql语句有些差别.jdbc调用一般的sql语句的时候,返回的是结果集,或是sql语句后是否执行成功的标记量.而存储过程返回的可以是结果集,输出参数.返回状态 ...
- Spring-framework下载
下载版本,修改版本号就行. http://repo.springsource.org/libs-release-local/org/springframework/spring/4.3.2.RELEA ...