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(列锁定&列分组)的更多相关文章
- [转] js实现html table 行，列锁定
js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTM ...
- SQL Server-聚焦计算列或计算列持久化查询性能（二十二）
前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...
- android手机旋转屏幕时让GridView的列数与列宽度自适应
无意中打开了一年前做过的一个android应用的代码,看到里面实现的一个小功能点(如题),现写篇文章做个笔记.当时面临的问题是,在旋转屏幕的时候需要让gridview的列数与宽度能自适应屏幕宽度,每个 ...
- 关于DataTable添加新列到指定列的方法
在开发新项目的时候发现了一个问题 dtResult.Columns.Add()方法只能将指定的列添加到DataTable的列的最后的位置,但是不能添加到指定的列上.举例来说,假设dtResult总共有 ...
- .NET组件控件实例编程系列——5.DataGridView数值列和日期列
在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会自动显示对应类型的列.当然我们自己可以手工选择列的类型,例如ComboBox列.Button列.Link列. ...
- MySQL 添加列， 修改列， 删除列
ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 查看数据库创建语句: show create database 数据库名: 查看创建表的语句: show c ...
- DataTable 删除列 调整列顺序 修改列标题名称
DataTable dt = new DataTable(); //删除列 dt.Columns.Remove("Sex"); dt.Columns.Remove("Ag ...
- SQL中 将同一个表中的A列更新到B列，B列更新到A列
有网友在SKYPE问及,如标题,SQL中 将同一个表中的A列更新到B列,B列更新到A列. 其实这个不是问题,直接写更新语句即可,可以参考下面动画演示: SQL source code: CREATE ...
- MySQL 语句大全--------添加列，修改列，删除列
ALTER TABLE:添加,修改,删除表的列,约束等表的定义. 查看列:desc 表名; 修改表名:alter table t_book rename to bbb; 添加列:alter table ...
随机推荐
- DatacontractAttribute的使用规则
关于DatacontractAttribute的使用规则和说明, DatacontractAttribute是序列化类的另一种方法,和XmlMemberAttribute(也就是XmlElementA ...
- Android APK瘦身方法小结
众所周知,APP包体的大小,会影响推广的难度,用户不太喜欢下载太大的APP,同类型同等功能的APP中往往是包体小的更受用户的青睐,所以降低包体是一项非常必要的事情,也是最近公司的APP需要降低包体,所 ...
- android hook 框架 ADBI 如何实现so函数挂钩
上一篇 android 5 HOOK 技术研究之 ADBI 项目 02 分析了hijack.c, 这个文件编译为一个可执行程序 hijack, 该程序实现了向目标进程注入一个动态库的功能.这一篇继续研 ...
- vue.js 2的表单控件
静下心,抄一段sample,以后可以快点到这里来抄...: <!DOCTYPE html> <html> <head> <meta charset=" ...
- Delphi存取图像完整解决方案
http://blog.sina.com.cn/s/blog_693cf1cf0100plkq.html 对于涉及图像数据的数据库应用程序,图像数据的存取技术是一个关键.由于缺少技术文档及DEMO例程 ...
- Bfs+最短路【p3393】 逃离僵尸岛
Description 小a住的国家被僵尸侵略了!小a打算逃离到该国唯一的国际空港逃出这个国家. 该国有\(N\)个城市,城市之间有道路相连.一共有\(M\)条双向道路.保证没有自环和重边. \(K\ ...
- Quaternion Euler
geometry_msgs::Quaternion orientation = map->info.origin.orientation; tf::Matrix3x3 mat(tf:: ...
- HDOJ 3516 Tree Construction 四边形优化dp
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=3516 题意: 大概就是给你个下凸包的左侧,然后让你用平行于坐标轴的线段构造一棵树,并且这棵树的总曼哈顿 ...
- [BZOJ 1806] Miners 矿工配餐
Link: BZOJ 1806 传送门 Solution: 为了使状态包含每个节点前所有必须的信息: 设$dp[i][a1][a2][b1][b2]$为配送到第$i$个,一厂前两个为$a1,a2$,二 ...
- DB2如何调整表空间大小
DB2如何调整表空间大小 刚刚接到客户那边打的电话,程序一直报错,所有的业务都做不了,拷贝了一份应用服务器(weblogic)的日志,日志里显示: WARN : 2009-06-18 16:24:32 ...