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 ...
随机推荐
- 洛谷T8115 毁灭
题目描述 YJC决定对入侵C国的W国军队发动毁灭性打击.将C国看成一个平面直角坐标系,W国一共有n^2个人进入了C国境内,在每一个(x,y)(1≤x,y≤n)上都有恰好一个W国人.YJC决定使用m颗核 ...
- android 图片凸出
转自 http://blog.csdn.net/hupei/article/details/52064946 概述 今天有个群友问 Android图片凸出 效果怎么弄,早以前有过类似的需求,整个项目的 ...
- 关于math头文件
math.h是c语言里的 cmath是c++里的 fabs是对小数求绝对值 abs是对整数绝对值 用math.h里的abs对小数不能求绝对值- - fabs对小数取绝对值 abs是对整数 现在要对一个 ...
- 免格式化制作老毛桃PE工具
由于移动硬盘数据很多,格式化制作太麻烦 先去老毛桃官网下载PE,生成ISO文件 将移动硬盘单独划分一个2G的空间用于装老毛桃,并格式化为FAT32格式,这样就避免全盘格式化了,只需要格式化这个分区 ...
- zabbix 批量添加聚合图形
环境为centos 脚本要在centos zabbix服务器上运行,zabbix server上运行 1.先把脚本部署到zabbix客户端,把脚本保存为nic.sh 存放路径确保zabbix可以访问 ...
- Gson解析json数据的案例一
转自:http://blog.csdn.net/l331258747/article/details/51547338: Android利用Gson解析嵌套多层的Json 首先先讲一个比较简单点的例子 ...
- python update数据
#!/usr/bin/env python # -*- coding:utf-8 -*- # @Time : 2017/11/23 23:57 # @Author : lijunjiang # @Fi ...
- 【linux高级程序设计】（第十二章）Linux多线程编程 3
条件变量通信机制 条件变量必须配合互斥锁一起实现对资源的互斥访问 使用方法: int pthread_cond_init (pthread_cond_t *__restrict __cond, __c ...
- Appium+python自动化11-adb必知必会的几个指令【转载】
前言 学android测试,adb是必学的,有几个常用的指令需要熟练掌握 一.检查设备 1.如何检查手机(或模拟器)是连上电脑的,在cmd输入: >adb devices
- python接口自动化7-参数关联【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...