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 ...
随机推荐
- YYH的王国（NOIP模拟赛Round 6）
题目描述 YYH拥有一个有n个城市的国家,编号为1~n.其中城市i到城市j的路径长度为i和j的最小公倍数.现在YYH想建一些高速公路,使得任意两座城市都能通过高速公路直接或间接到达.建造一条高速公路的 ...
- cat /proc/maps 进程内存映射【转】
转自:http://blog.csdn.net/fisher_jiang/article/details/5063852 proc/<PID>/maps查看进程的虚拟地址空间是如何使用的. ...
- POCO库中文编程参考指南（5）Poco::Net::SocketAddress
1 枚举 最大地址长度,这个与Poco::Net::IPAddress中的定义可以类比,不过这里指的是`struct sockaddr_in6 enum { MAX_ADDRESS_LENGTH = ...
- XAudio2播放PCM
XAudio2 是一个跨平台的API,在Xbox 360及Windows中得到支持.在Xbox 360上, XAudio2作为一个静态库编译到游戏可执行文件中.在Windows上,XAudio2提供一 ...
- c/c++中const用法总结
1.修饰常量时: const int temp1; //temp1为常量,不可变 int const temp2; //temp2为常量,不可变 2.修饰指针时: 主要看const在*的前后,在前 ...
- Selenium2+python自动化17-JS处理滚动条【转载】
前言 selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候 ...
- （8）java基础知识-字符编码
这块比较乱待整理... http://www.regexlab.com/zh/encoding.htm 字符编码 将各种文字.图形.标点.数字整合在一个集合叫做字符集. 把这些字符集按照不用规则进行编 ...
- Peak
A sequence of \(n\) integers \(a_1, a_2, \dots, a_n\) is called a peak, if and only if there exists ...
- hdu5884（多叉哈夫曼树）
hdu5884 题意 给出 n 个数,每次选择不超过 k 个数合并(删掉这些数,加入这些数的和),花费为合并的这些数的和,要求最后只剩下一个数,问 k 最小取多少. 分析 二分 k,合并数的时候可以按 ...
- 几何【P2313】 [HNOI2005]汤姆的游戏
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述--->p2313 [HNOI]汤姆的游戏 分析 说不上是分析. 数据范围给出来,这题明显暴力啊emmm. 个人认为的坑点. 这题不 ...