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 ...
随机推荐
- hihoCoder挑战赛34 B题（快速求第k轮冒泡排序的结果）
官方题解:https://media.hihocoder.com/contests/challenge34/tutorials-previewed.pdf 题目链接:http://hihocoder. ...
- IAT Hook
@author: dlive 0X01 IAT Hook的优缺点 优点:工作原理与实现都比较简单 缺点:如果想钩取的API不在目标进程的IAT中,那么就无法使用该技术进行钩取操作.即如果要钩取的API ...
- mlock家族：锁定物理内存【转】
转自:http://blog.csdn.net/fjt19900921/article/details/8074541 锁住内存是为了防止这段内存被操作系统swap掉.并且由于此操作风险高,仅超级用户 ...
- android hook 框架 libinject2 如何实现so注入
Android so注入-libinject2 简介.编译.运行 Android so注入-libinject2 如何实现so注入 Android so注入-Libinject 如何实现so注入 A ...
- [置顶] Linux 虚拟地址与物理地址的映射关系分析【转】
转自:http://blog.csdn.net/ordeder/article/details/41630945 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...
- 自己写操作系统 2 - 安装bochs虚拟机
以ubuntu操作系统为例 一.命令行安装 sudo apt-get install vgabios bochs bochs-x bximage 此方法方便,不过都说这个方法安装的bochs没有调试功 ...
- 浅谈正则表达式-PHP为例
第一次比较系统的学习正则表达式,本篇文章以PHP语言为例来学习. 基本概念 正则表达式=普通字符(如a-z)+分隔符(正斜线(/).hash符号(#) 以及取反符号(~))+特殊字符(称为元字符) 两 ...
- [BZOJ4756][Usaco2017 Jan]Promotion Counting 树状数组
4756: [Usaco2017 Jan]Promotion Counting Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 305 Solved: ...
- Guava源码学习（三）ImmutableCollection
基于版本:Guava 22.0 Wiki:Immutable collections 0. ImmutableCollection简介 类似于JDK的Collections.unmodifiableX ...
- jcl sort comp3 to 表示型
Lets say your packed data is at 10th column and is of length 6, S9(4)V99 You could try the following ...