1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2.  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  4. <html>
  5. <head>
  6.  
  7. <title>My JSP 'index.jsp' starting page</title>
  8.  
  9. <!-- 引入样式，能够把ext-all.css换成ext-all-access.css |  ext-all-gray.css改变样式-->
  10. <link rel="stylesheet" type="text/css" href="./extjs4.1/resources/css/ext-all.css">
  11.  
  12. <!-- 开发模式引入ext-all-debug.js，公布模式引入ext-all.js -->
  13. <script type="text/javascript" src="./extjs4.1/ext-all-debug.js"></script>
  14.  
  15. <!-- 语言包 -->
  16. <script type="text/javascript" src="./extjs4.1/locale/ext-lang-zh_CN.js"></script>
  17.  
  18. <script type="text/javascript">
  19. 	Ext
  20. 			.onReady(function() {
  21. 				// 自己定义数据模型
  22. 				var myModel = Ext.define("studentInfo", {
  23. 					extend : "Ext.data.Model",
  24. 					fields : [ {
  25. 						name : "stuNo",
  26. 						type : "string"
  27. 					}, {
  28. 						name : "stuName",
  29. 						type : "string"
  30. 					}, {
  31. 						name : "stuClass",
  32. 						type : "string"
  33. 					}, {
  34. 						name : "chScore",
  35. 						type : "number"
  36. 					}, {
  37. 						name : "maScore",
  38. 						type : "number"
  39. 					}, {
  40. 						name : "enScore",
  41. 						type : "number"
  42. 					} ]
  43. 				});
  44.  
  45. 				// 本地数据
  46. 				var myData = [ [ "No1", "Lisa", "1", 90, 90, 89 ], [ "No2", "Jack", "2", 91, 94, 100 ],
  47. 						[ "No3", "Nuna", "4", 92, 90, 90 ], [ "No4", "Selein", "3", 93, 65, 78 ],
  48. 						[ "No5", "Andy", "1", 78, 86, 89 ], [ "No6", "Nina", "2", 87, 90, 80 ],
  49. 						[ "No7", "Mofaid", "2", 85, 79, 89 ], [ "No8", "Holy", "4", 81, 90, 63 ],
  50. 						[ "No9", "Wooden", "1", 90, 92, 89 ], [ "No10", "Kasis", "1", 90, 90, 92 ],
  51. 						[ "No11", "wangzs", "5", 80, 90, 52 ], [ "No11", "wangsm", "5", 97, 40, 82 ],
  52. 						[ "No12", "lily", "3", 60, 90, 72 ] ];
  53. 				var myStore = Ext.create("Ext.data.Store", {
  54. 					model : "studentInfo",
  55. 					data : myData,
  56. 					groupField : "stuClass"//默认以班级分组
  57. 				});
  58.  
  59. 				// 表格
  60. 				var myGrid = new Ext.grid.Panel({
  61. 					columns : [ {
  62. 						text : "姓名",
  63. 						dataIndex : "stuName",
  64. 						renderer : function(value) {//设置学生个人博客链接
  65. 							return "<a href='http://blog.csdn.net/adam_wzs'>" + value + "</a>";
  66. 						},
  67. 						locked : true,//锁定该列
  68. 						summaryType : "count",
  69. 						summaryRenderer : function(value) {
  70. 							return "共" + value + "人";
  71. 						}
  72. 					}, {
  73. 						text : "学生信息",
  74. 						columns : [ {
  75. 							text : "学号",
  76. 							dataIndex : "stuNo"
  77. 						}, {
  78. 							text : "班级",
  79. 							dataIndex : "stuClass",
  80. 							renderer : function(value) {
  81. 								var resultStr;
  82. 								if (value == "1") {
  83. 									resultStr = "一年级";
  84. 								} else if (value == "2") {
  85. 									resultStr = "二年级";
  86. 								} else if (value == "3") {
  87. 									resultStr = "三年级";
  88. 								} else if (value == "4") {
  89. 									resultStr = "四年级";
  90. 								} else {
  91. 									resultStr = "x年级";
  92. 								}
  93. 								return resultStr;
  94. 							}
  95. 						} ]
  96. 					}, {
  97. 						text : "成绩",
  98. 						columns : [ {
  99. 							text : "语文",
  100. 							dataIndex : "chScore",
  101. 							summaryType : "sum",//总分
  102. 							summaryRenderer : function(value) {
  103. 								return "总分:" + value;
  104. 							}
  105. 						}, {
  106. 							text : "数学",
  107. 							dataIndex : "maScore",
  108. 							summaryType : "average",//平均分
  109. 							summaryRenderer : function(value) {//设置结果格式
  110. 								return "平均分" + Ext.util.Format.number(value, "0.00");
  111. 							}
  112. 						}, {
  113. 							text : "英语",
  114. 							dataIndex : "enScore",
  115. 							summaryType : "max",//最高分
  116. 							summaryRenderer : function(value) {
  117. 								return "最高分:" + value;
  118. 							}
  119. 						} ]
  120. 					} ],
  121. 					store : myStore,
  122. 					features : [ {//定义表格特征
  123. 						ftype : "groupingsummary",
  124. 						enableGroupingMenu : true
  125. 					//使表头的菜单分组控制可用
  126. 					// hideGroupedHeader : true
  127. 					//隐藏当前分组的表头
  128. 					} ]
  129. 				});
  130.  
  131. 				// 窗体
  132. 				var window = Ext.create("Ext.window.Window", {
  133. 					title : "学生成绩表",
  134. 					width : 600,
  135. 					height : 400,
  136. 					items : myGrid,
  137. 					layout : "fit"
  138. 				});
  139. 				window.show();
  140. 			});
  141. </script>
  142.  
  143. </head>
  144.  
  145. <body>
  146. 	列锁定/列分组
  147. 	<br>
  148. </body>
  149. </html>

extjs_06_grid(列锁定&amp;列分组)的更多相关文章

  1. [转] js实现html table 行，列锁定

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...

  2. SQL Server-聚焦计算列或计算列持久化查询性能（二十二）

    前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...

  3. android手机旋转屏幕时让GridView的列数与列宽度自适应

    无意中打开了一年前做过的一个android应用的代码,看到里面实现的一个小功能点(如题),现写篇文章做个笔记.当时面临的问题是,在旋转屏幕的时候需要让gridview的列数与宽度能自适应屏幕宽度,每个 ...

  4. 关于DataTable添加新列到指定列的方法

    在开发新项目的时候发现了一个问题 dtResult.Columns.Add()方法只能将指定的列添加到DataTable的列的最后的位置,但是不能添加到指定的列上.举例来说,假设dtResult总共有 ...

  5. .NET组件控件实例编程系列——5.DataGridView数值列和日期列

    在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会自动显示对应类型的列.当然我们自己可以手工选择列的类型,例如ComboBox列.Button列.Link列. ...

  6. MySQL 添加列， 修改列， 删除列

    ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 查看数据库创建语句: show create database 数据库名: 查看创建表的语句: show c ...

  7. DataTable 删除列 调整列顺序 修改列标题名称

    DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...

  8. SQL中 将同一个表中的A列更新到B列，B列更新到A列

    有网友在SKYPE问及,如标题,SQL中 将同一个表中的A列更新到B列,B列更新到A列. 其实这个不是问题,直接写更新语句即可,可以参考下面动画演示: SQL source code: CREATE ...

  9. MySQL 语句大全--------添加列，修改列，删除列

    ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:alter table ...

随机推荐

  1. bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级——分层图+dijkstra

    Description 每天,农夫John需要经过一些道路去检查牛棚N里面的牛. 农场上有M(1<=M<=50,000)条双向泥土道路,编号为1..M. 道路i连接牛棚P1_i和P2_i ...

  2. 汕头市队赛SRM14 T3覆盖

    我们可以考虑两种情况 区间之间不相重叠 和 重叠 f[i][j]表示以当前最后一个区间以 i 结尾 并且选了 j 个区间 不相重叠的话 只要选 1-i-w 的max再加上 包含i在内的前四个数的和 相 ...

  3. classes could not be found: - android.support.v7.internal.app.WindowDecorActionBar问题的解决方法

    转载至----http://my.oschina.net/u/2425146/blog/546649?fromerr=aDYrFDVx.仅作个人收藏使用,有转载的朋友请连续原作者,谢谢 刚刚进入stu ...

  4. css3文件树

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. How do I list all fields of an object in Objective-C?

    http://stackoverflow.com/questions/1213901/how-do-i-list-all-fields-of-an-object-in-objective-c As m ...

  6. Java程序执行时间

    第一种是以毫秒为单位计算的.  Java代码  //伪代码 long startTime=System.currentTimeMillis();   //获取开始时间 doSomeThing();  ...

  7. Nginx模块GeoIP匹配处理IP所在国家、城市

    https://www.haiyun.me/archives/nginx-geoip.html

  8. AC日记——可能的路径 51nod 1247

    可能的路径 思路: 看到题目想到gcd: 仔细一看是更相减损: 而gcd是更相减损的优化版: 所以,对于每组数据判断gcd是否相等就好: 来,上代码: #include <cstdio> ...

  9. J.U.C并发框架源码阅读（十二）ConcurrentHashMap

    基于版本jdk1.7.0_80 java.util.concurrent.ConcurrentHashMap 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Us ...

  10. Codeforces Round #449 (Div. 2) A. Scarborough Fair【多次区间修改字符串】

    A. Scarborough Fair time limit per test 2 seconds memory limit per test 256 megabytes input standard ...