extjs_05_grid(表格分组)
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(表格分组)的更多相关文章
- Grid分组汇总
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext. ...
- Grid分组特性
Ext.onReady(function () { Ext.define('personInfo', { extend: 'Ext. ...
- extjs 分组函数自定义统计
//获取统计信息函数 Ext.getStatText = function (values) { var zy = 0; var tm = 0; for (var i = 0; i < valu ...
- HTML（二）：表格元素
表格元素的作用:用来格式化显示数据. 一.表格的基本结构 表格的基本语法:<TABLE border="设置表格边框尺寸大小" width="" cell ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11（知识点：表格操作、代码编写规则）
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- ExtJs控件属性配置详细
序言: 1.本文摘自网络,看控件命名像是4.0以前的版本,但控件属性配置仍然可以借鉴(不足之处,以后项目用到时再续完善). Ext.form.TimeField: 配置项: ...
- ExtJs知识点概述
1.前言 ExtJS的前身是YUI(Yahoo User Interface).经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No10-No11
系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...
- Extjs 属性控件[转载]
Ext.form.TimeField: 配置项: maxValue:列表中允许的最大时间 maxText:当时间大于最大值时的错误提示信息 ...
随机推荐
- Session和Cookie之间区别与联系
一. 概念理解 你可能有留意到当你浏览网页时,会有一些推送消息,大多数是你最近留意过的同类东西,比如你想买桌子,上淘宝搜了一下,结果连着几天会有各种各样的桌子的链接.这是因为 你浏览某个网页的时候,W ...
- Jprofiler注册码
L-Larry_Lau@163.com#23874-hrwpdp1sh1wrn#0620 L-Larry_Lau@163.com#36573-fdkscp15axjj6#25257 L-Larry_L ...
- poj 1849 Two 树形dp
Two Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1092 Accepted: 527 Description Th ...
- fuzhou 1075 分解素因子
Problem 1075 分解素因子 Accept: 1331 Submit: 2523Time Limit: 1000 mSec Memory Limit : 32768 KB Prob ...
- Vue.js 的一些小技巧
给 props 属性设置多个类型 这个技巧在开发组件的时候用的较多,为了更大的容错性考虑,同时代码也更加人性化: export default { props: { width: { type: [S ...
- jQuery实现的上下滚动公告栏详细讲解
之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,因为刚开始自己的思路并不是太清晰,在网上找了很多的源码,但是却发现都不能让自己满意,有的还会出现一些小问题,比如,有时候 ...
- 【java错误】System.out.println()出错
今天想测试java的System的类,没想到居然出错了.在同一个包下的java文件System全错,而其他包中的System没错.上网查了下资料,原来我是重定义了System类,覆盖了原来的Syste ...
- 【日常记录】【unity3d】 获取手柄轴的输入
参考 https://blogs.msdn.microsoft.com/nathalievangelist/2014/12/16/joystick-input-in-unity-using-xbox3 ...
- leetCode Detect Capital
1.问题描述 Given a word, you need to judge whether the usage of capitals in it is right or not. We defin ...
- webpack的require是如何工作的？
https://stackoverflow.com/questions/35625593/how-does-webpacks-require-work wepback的require函数调用类似于no ...