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. DOM-访问元素

    id:元素在文档中唯一标识符. title:有关元素的附加说明信息,一般通过工具提示条显示出来. lang:元素内容的语言编码,很少使用 dir:语言方向,职位“Ltr”(从左至右).Rtl(从右至左 ...

  2. Java基础教程(9)--流程控制

    一.分支结构 1.if语句   if语句会与其后的第一条语句或代码块结合,且只有当判断条件为true时才执行语句或代码块.例如,自行车只有在运动的时候才可以减速,就像下面这样: void applyB ...

  3. log4j2使用教程

    Log4j2简介 log4j2是log4j 1.x 的升级版,2015年5月,Apache宣布log4j1.x 停止更新.最新版为1.2.17.   log4j2参考了logback的一些优秀的设计, ...

  4. fuzhou 1075 分解素因子

    Problem 1075 分解素因子 Accept: 1331    Submit: 2523Time Limit: 1000 mSec    Memory Limit : 32768 KB Prob ...

  5. cf605D. Board Game(BFS 树状数组 set)

    题意 题目链接 有\(n\)张牌,每张牌有四个属性\((a, b, c, d)\),主人公有两个属性\((x, y)\)(初始时为(0, 0)) 一张牌能够被使用当且仅当\(a < x, b & ...

  6. p2p状态码

    因为需要的确定状态太多,减少数据库的压力,采取二进制表示状态码 状态码工具类 package com.xmg.p2p.base.util; /** * 用户状态类,记录用户在平台使用系统中所有的状态. ...

  7. Android 对话框 (AlertDialog)

    Android 提供了 AlertDialog 类可通过其内部类 Builder 轻松创建对话框窗口,但是没法对这个对话框窗口进行定制,为了修改 AlertDialog 窗口显示的外观,解决的办法就是 ...

  8. Mongodb的入门(1)window安装mongodb

    mongodb: Mongodb,分布式文档存储数据库,由C++语言编写,旨在为WEB应用提供可扩展的高性能数据存储解决方案.MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数 ...

  9. 记录一次mybatis查询返回为空数据库却能查询到数据的经历

    昨晚上测试人员给发了一条测试数据,说是根据这条数据接口返回信息为空.之后根据给的信息去数据库查询了下,明明是有数据的.但是用mybatis就是查询不出来.奇了怪了,自己测试的数据都能查询出来,为何这条 ...

  10. 深入理解abstract class和interface

    摘自:http://www.ibm.com/developerworks/cn/java/l-javainterface-abstract/ (如有侵权,请留言,版主将立即删除) abstract c ...