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. Java利用反射取得类的所有信息

    Java中可以利用反射获取类的名称.构造函数.属性.方法.也就是说可以通过反射可以取得类的所有信息(不管该成员是否封装为private). 如有下面的Dept类定义: package org.lyk. ...

  2. Java基础教程(20)--数字和字符串

    一.数字   在用到数字时,大多数情况下我们都会使用基本数据类型.例如: int i = 500; float gpa = 3.65f; byte mask = 0xff;   然而,有时候我们既需要 ...

  3. Spring Boot学习笔记(八)使用jar和war方式打包并在外部Tomcat中部署运行

    使用war包的方式发布到外部Tomcat中去 首先修改pom.xml中的配置,使打包方式设置为war包的形式 然后 maven update project 更新下项目 Application入口文件 ...

  4. 南阳nyoj 509 因子和阶乘

    因子和阶乘 时间限制:1000 ms  |  内存限制:65535 KB 难度:2  http://acm.nyist.net/JudgeOnline/problem.php?pid=509 描述 给 ...

  5. hello Groovy

    Groovy [rocky@www ~]$ curl -s get.sdkman.io 1. 下载 [rocky@www Downloads]$ wget https://dl.bintray.com ...

  6. 规划行业GIS云平台“城智图”上线运行

    首先祝各位朋友中秋节快乐! 城智图(www.imapcity.com)是远景GIS云平台的首个应用项目,它以全新的方式为规划部门提供地理信息服务,改变了以前规划部门只有CAD成果数据,难以查阅.深入挖 ...

  7. 网络 OSI参考模型与TCP/IP模型

    ISO是国际标准化组织.OSI,开放互联系统.IOS,思科交换机和路由器的操作系统. TCP/IP模型是OSI模型的简化.所有的互联网协议都是基于OSI模型开发的. 分层:便于管理,每层只管理下层,总 ...

  8. webstorm忽略node_modules目录

    我在使用了cnpm后node_modules之前的层级目录变成了同一级目录,所以目录很多,造成webstorm读取时卡死. 网上大家列了各种方法,在这里我归纳一下! 先给大家看看一些相关链接. 方法1 ...

  9. 009_svn配置多仓库与权限控制（Alpha）

    1,配置多仓库 实际项目中,我们会同时开发多个项目,通过SVNserve进行仓库监管,但是监管命令只能同时监管一个文件夹,而不能同时监管多个仓库. 解决方法: 可以通过监管总目录来监管所有仓库 SVN ...

  10. 'webpack' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    npm updatea -g 很严重,把本地npm安装包都更新了,跟项目npm安装包版本不一,导致 意思是版本冲突,手动卸载了,重新安装还是最新版本,很是头疼.找同事的电脑拷贝了一份,然后复制过来报“ ...