extjs_05_grid(表格分组)
来源:互联网 发布:php网站开发培训 编辑:程序博客网 时间:2024/06/10 18:20
<%@ 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>
1 0
- extjs_05_grid(表格分组)
- 分组表格
- ExtJs分组表格
- 分组的表格
- extjs---分组表格groupGrid
- ext表格分组
- 表格分组折叠
- 表格表头分组构件
- ext4.0 表格分组和分组数量
- Extjs 表格分组 grid grouping
- MiniUI——表格分组
- 新表格表头分组构件
- 表格奇偶行换色——简单表格与分组表格
- Extjs 表格分组 grid grouping 获取某一分组
- 封装好的分组折叠表格
- SQL 对表格进行按日期分组
- 表格数据分组:Ext.grid.GroupingView
- 表格数据分组:Ext.grid.GroupingView
- Unity3D的四种坐标系
- 外挂测试
- mysql 获取当前日期及格式化
- async/await 异步编程
- web 服务器 appche
- extjs_05_grid(表格分组)
- Ubuntu 下安装wireshark
- Unity3d 自定义鼠标
- 计算int 型数值在内存中二进制1的个数
- windows下使用MYSQL的mysqldumpslow进行慢日志分析
- 黑马程序员---Java中的JDK1.5部分特性
- Java面试题(2014年6月24)
- 穷学生
- Context类