AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[ExtJS5学习笔记]第三十节 sencha extjs 5表格gridpanel分组汇总

2014-12-29 1423
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

本文作者：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

就这样设置，就可以简单的实现一个分组报表统计了，有求平均值求和等方法。简单易用

文章标签：
JavaScript
前端开发
苏生米沿
目录
相关文章
甜面酱肉丝
|
机器学习/深度学习 数据采集 编解码
深度学习原理篇 第八章：CLIP
简要介绍clip的原理和代码实现。
甜面酱肉丝
3683 0
技术员阿伟
|
8月前
|
传感器 缓存 安全
《分布式软总线：网络丢包下的数据吞吐奇迹》
网络丢包是数据传输中的常见问题，由网络拥堵、物理链路故障或设备缺陷引起，导致视频卡顿、游戏延迟等问题。分布式软总线技术通过极简协议提升传输效率，采用快速丢包恢复策略、智能感知网络变化、多通道并发传输及分布式缓存等创新手段，在丢包情况下仍能保障高吞吐率。其优势在工业自动化和智能交通等领域得以体现，为复杂网络环境下的高效数据传输提供了可靠解决方案，推动未来网络通信发展。
技术员阿伟
280 10
汀丶人工智能
|
5月前
|
机器学习/深度学习 人工智能 算法
AI-Compass 强化学习模块：理论到实战完整RL技术生态，涵盖10+主流框架、多智能体算法、游戏AI与金融量化应用
AI-Compass 强化学习模块：理论到实战完整RL技术生态，涵盖10+主流框架、多智能体算法、游戏AI与金融量化应用
汀丶人工智能
399 2
131王
|
运维 监控 测试技术
构建高效运维体系：从监控到自动化的实践之路
【10月更文挑战第9天】 在当今信息技术飞速发展的时代，运维作为保障系统稳定性与效率的关键角色，正面临前所未有的挑战。本文将探讨如何通过构建一个高效的运维体系来应对这些挑战，包括监控系统的搭建、自动化工具的应用以及故障应急处理机制的制定。我们将结合具体案例，分析这些措施如何帮助提升系统的可靠性和运维团队的工作效率。
131王
249 1
开发V|TG_ch3nguang
|
机器学习/深度学习 人工智能 开发框架
智能ai量化高频策略交易软件、现货合约跟单模式开发技术规则
该项目涵盖智能AI量化高频策略交易软件及现货合约跟单模式开发，融合人工智能、量化交易与软件工程。软件开发包括需求分析、技术选型、系统构建、测试部署及运维；跟单模式则涉及功能定义、策略开发、交易执行、终端设计与市场推广，确保系统高效稳定运行。
开发V|TG_ch3nguang
555 0
好奇的菜鸟
IDEA启动多个实例
IDEA启动多个实例
好奇的菜鸟
288 5
叫做饺子
|
机器学习/深度学习 自然语言处理 并行计算
Transformer模型
【10月更文挑战第3天】
叫做饺子
555 0
杭州奥零数据科技
|
机器学习/深度学习 存储 人工智能
AllData数据中台核心菜单九：元数据管理
杭州奥零数据科技有限公司成立于2023年，专注于数据中台业务，维护开源项目AllData并提供商业版解决方案。AllData提供数据集成、存储、开发、治理及BI展示等一站式服务，支持AI大模型应用，助力企业高效利用数据价值。
杭州奥零数据科技
321 0
鱼和熊掌一锅出
|
应用服务中间件 nginx 数据安全/隐私保护
借助阿里个人版镜像仓库+云效实现全免费同步docker官方镜像到国内
受docker hub 6月初网络变更的影响，国内拉取docker官方镜像变得不稳定……
鱼和熊掌一锅出
2630 1
老板这功能得加钱
|
Linux 固态存储
linux ext4-fs error,[求助]EXT4-fs error (device sdb4) ext4_find_entry
linux ext4-fs error,[求助]EXT4-fs error (device sdb4) ext4_find_entry
老板这功能得加钱
767 0
linux ext4-fs error,[求助]EXT4-fs error (device sdb4) ext4_find_entry