extjs_06_grid(列锁定&列分组)

<%@ 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", "3", 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 ],
						[ "No11", "wangzs", "5", 80, 90, 52 ], [ "No11", "wangsm", "5", 97, 40, 82 ],
						[ "No12", "lily", "3", 60, 90, 72 ] ];
				var myStore = Ext.create("Ext.data.Store", {
					model : "studentInfo",
					data : myData,
					groupField : "stuClass"//默认以班级分组
				});

				// 表格
				var myGrid = new Ext.grid.Panel({
					columns : [ {
						text : "姓名",
						dataIndex : "stuName",
						renderer : function(value) {//设置学生个人博客链接
							return "<a href='http://blog.csdn.net/adam_wzs'>" + value + "</a>";
						},
						locked : true,//锁定该列
						summaryType : "count",
						summaryRenderer : function(value) {
							return "共" + value + "人";
						}
					}, {
						text : "学生信息",
						columns : [ {
							text : "学号",
							dataIndex : "stuNo"
						}, {
							text : "班级",
							dataIndex : "stuClass",
							renderer : function(value) {
								var resultStr;
								if (value == "1") {
									resultStr = "一年级";
								} else if (value == "2") {
									resultStr = "二年级";
								} else if (value == "3") {
									resultStr = "三年级";
								} else if (value == "4") {
									resultStr = "四年级";
								} else {
									resultStr = "x年级";
								}
								return resultStr;
							}
						} ]
					}, {
						text : "成绩",
						columns : [ {
							text : "语文",
							dataIndex : "chScore",
							summaryType : "sum",//总分
							summaryRenderer : function(value) {
								return "总分:" + value;
							}
						}, {
							text : "数学",
							dataIndex : "maScore",
							summaryType : "average",//平均分
							summaryRenderer : function(value) {//设置结果格式
								return "平均分" + Ext.util.Format.number(value, "0.00");
							}
						}, {
							text : "英语",
							dataIndex : "enScore",
							summaryType : "max",//最高分
							summaryRenderer : function(value) {
								return "最高分:" + value;
							}
						} ]
					} ],
					store : myStore,
					features : [ {//定义表格特征
						ftype : "groupingsummary",
						enableGroupingMenu : true
					//使表头的菜单分组控制可用
					// 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_06_grid(列锁定&amp;列分组)

extjs_06_grid(列锁定&列分组)
