watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYWRhbV93enM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'index.jsp' starting page</title>

<!-- 引入样式，能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->

<link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">

<!-- 开发模式引入ext-all-debug.js。公布模式引入ext-all.js -->

<script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>

<!-- 语言包 -->

<script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript">

	Ext.onReady(function() {

		// 自己定义数据模型

		var myModel = Ext.define("studentInfo", {

			extend : "Ext.data.Model",

			fields : [ {

				name : "stuNo",

				type : "string"

			}, {

				name : "stuName",

				type : "string"

			}, {

				name : "stuClass",

				type : "string"

			}, {

				name : "chScore",

				type : "number"

			}, {

				name : "maScore",

				type : "number"

			}, {

				name : "enScore",

				type : "number"

			} ]

		});

		// 本地数据

		var myData = [ [ "No1", "Lisa", "1", 90, 90, 89 ], [ "No2", "Jack", "2", 91, 94, 100 ],

				[ "No3", "Nuna", "4", 92, 90, 90 ], [ "No4", "Selein", "4", 93, 65, 78 ], [ "No5", "Andy", "1", 78, 86, 89 ],

				[ "No6", "Nina", "2", 87, 90, 80 ], [ "No7", "Mofaid", "2", 85, 79, 89 ], [ "No8", "Holy", "4", 81, 90, 63 ],

				[ "No9", "Wooden", "1", 90, 92, 89 ], [ "No10", "Kasis", "1", 90, 90, 92 ] ];

		var myStore = Ext.create("Ext.data.Store", {

			model : "studentInfo",

			data : myData,

			groupField : "stuClass"//以班级分组

		});

		// 表格

		var myGrid = new Ext.grid.Panel({

			columns : [ {

				text : "学号",

				dataIndex : "stuNo"

			}, {

				text : "姓名",

				dataIndex : "stuName",

				renderer : function(value) {//设置列的样式

					return "<a href='http://www.baidu.com'>" + value + "</a>";

				}

			}, {

				text : "班级",

				dataIndex : "stuClass"

			}, {

				text : "语文",

				dataIndex : "chScore",

				summaryType : "sum"//总分

			}, {

				text : "数学",

				dataIndex : "maScore",

				summaryType : "average",//平均分

				summaryRenderer : function(value) {//设置结果格式

					return Ext.util.Format.number(value, "0.00");

				}

			}, {

				text : "英语",

				dataIndex : "enScore",

				summaryType : "max"//最高分

			} ],

			store : myStore,

			features : [ {//定义表格特征

				ftype : "groupingsummary",

				hideGroupedHeader : true//隐藏当前分组的表头

			} ]

		});

		// 窗体

		var window = Ext.create("Ext.window.Window", {

			title : "学生成绩表",

			width : 600,

			height : 400,

			items : myGrid,

			layout : "fit"

		});

		window.show();

	});

</script>

</head>

<body>

	表格分组

	<br>

</body>

</html>

extjs_05_grid(表格分组)的更多相关文章

  1. Grid分组汇总

    Ext.onReady(function () {                Ext.define('personInfo', {                    extend: 'Ext. ...

  2. Grid分组特性

    Ext.onReady(function () {                Ext.define('personInfo', {                    extend: 'Ext. ...

  3. extjs 分组函数自定义统计

    //获取统计信息函数 Ext.getStatText = function (values) { var zy = 0; var tm = 0; for (var i = 0; i < valu ...

  4. HTML（二）：表格元素

    表格元素的作用:用来格式化显示数据. 一.表格的基本结构 表格的基本语法:<TABLE border="设置表格边框尺寸大小" width="" cell ...

  5. 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. ExtJs控件属性配置详细

    序言:    1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项:            ...

  7. ExtJs知识点概述

    1.前言 ExtJS的前身是YUI(Yahoo User Interface).经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基 ...

  8. 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  9. Extjs 属性控件[转载]

    Ext.form.TimeField: 配置项:            maxValue:列表中允许的最大时间            maxText:当时间大于最大值时的错误提示信息          ...

随机推荐

  1. [android] 手机卫士黑名单功能（ListView优化）

    上一篇记录了使用ListView展示出来了100条数据,当慢慢拖动的时候,不会有问题,但是当拖动很快的时候,应用会报anr错误 查看错误日志,看到报OutOfMemoryError,内存不足 List ...

  2. J2EE企业级应用架构发展

    一. 准备工作 1. 本文参考 J2EE企业级应用架构 二. 架构发展 1. 原始版 用户+服务器[单台虚拟机]+数据库[mysql或者oracle],用户访问量比较少. 特点:单节点[只有一台机器] ...

  3. QT5.4.2静态编译(包含QtWebKit)，在VS2013上创建项目，并成功运行

            Qt项目发布的exe程序,默认是以动态链接形式的,这样发布后的程序会附带好多Qt自己的dll库,这样文件数量不仅多,而且移植到其他电脑上的时候,还可能会遇到,提示缺其他库等各种运行不起 ...

  4. phoenix使用vue--单独js（不使用app.js）

    实际中不能都在一个js里 api.js app.js admin.js --vue 后台 记录下方法 static--admin--hello.js import "phoenix_html ...

  5. CentOS7系列--2.1CentOS7中安装配置NTP服务

    CentOS7安装配置NTP服务 NTP服务是时间同步服务 1. 安装NTPd [root@centos7 ~]# yum install -y ntp [jack@centos7 ~]$ vi /e ...

  6. 使用MaxCompute访问TableStore（OTS） 简明手册

    摘要: 大数据计算服务 MaxCompute 能够提供强大的分析能力,而分布式 NoSQL 数据库表格存储在行级别上的实时更新和可覆盖性写入等特性,相对于 MaxCompute 内置表 append- ...

  7. redis 事务、Jedis事务处理流程

    127.0.0.1:6379> multiOK127.0.0.1:6379> sadd myset a b cQUEUED  ——>并没有执行,排队等待127.0.0.1:6379& ...

  8. 【Python】Java程序员学习Python（十）— 类、包和模块

    我觉得学习到现在应该得掌握Python的OOP编程了,但是现在还没有应用到,先留一个坑. 一.类和对象 说到类和对象其实就是在说面向对象编程,学完Java以后我觉得面向对象编程还是很不错的,首先封装了 ...

  9. fastdfs搭建和使用

    目录 前言 安装 安装插件 tracker storage 用自带的 client 进行测试 想要查看结果必须安装nginx 使用示例 引用 配置 使用 前言 参考网址 错误处理 安装 安装插件 yu ...

  10. 实用vim 130+命令

    基本命令 :e filename Open filename for edition :w Save file :q Exit Vim :q! Quit without saving :x Write ...