ExtJS学习(三)Grid表格
表格说明
Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store来定义。store负责把各种各样（如二维数组、JSON对象数组、XML文本等）的原始数据转换成Ext.data.Record类型的对象。通过Ext.data.ArrayStore我们可以把任何格式的数据转化成表格可以使用的形式，这样就不需要为每种数据格式写一个对应的实现了。
制作一个简单的表格及属性说明
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',sortable:false},
{header:'描述',dataIndex:'descn',sortable:false}
];
//定义数据
var data =[
['1','张三','描述01'],
['2','李四','描述02'],
['3','王五','描述03'],
['4','springok','springok.com'],
['5','springok','springok.com']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'}
]
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
enableColumnMove: false, //禁止拖放列
enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
forceFit:true //自动填满表格
});
});测试：
表格的渲染
只需要在需要渲染的columns定义的时候将列的返回值更改为需要定义为HTML即可。
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',sortable:false},
{header:'状态',dataIndex:'descn',width:80,renderer:function(value){
if(value=='描述01'){
return "<span style='color:green;font-weight:bold';>描述01</span>";
} else {
return "<span style='color:red;font-weight:bold';>"+value+"</span>";
}
}}
];
//定义数据
var data =[
['1','张三','描述01'],
['2','李四','描述02'],
['3','王五','描述03'],
['4','springok','springok.com'],
['5','springok','springok.com']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'}
]
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
enableColumnMove: false, //禁止拖放列
enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
forceFit:true //自动填满表格
});
});效果：
为了程序的通用性就自定义了一个方法，在renderer里引入即可，如下代码：
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('name');
if(value=="springok")
cell.style="background-color:red";
return data;
} 列中引用：
{header:'态',dataIndex:'descn',width:80,renderer:renderMotif}效果：
自定义渲染的方法
//自定义renderner方法
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){ }参数的含义：
value：将要显示到单元格里的值；
cellmeta：单元格的相关属性，主要有id和CSS；
record：这行的数据对象，如果需要获取其他列的值，可以通过record.data[“id”]的方式得到，这个属性很重要，我们经常会用到；
rowIndex：行号，这里的行号指的是当前页中所有记录的顺序；
columnIndex：当前列的列号；
store：构造表格时传递的ds。表格里的所有数据都可以通过store获得。
构造一个Grid表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../ExtJS4.2/resources/css/ext-all.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="d1.js"></script>
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<h1>ExtJS4.2学习</h1>
<hr />
作者：springok
<h2>ExtJS grid表格</h2>
<div id="springokgrid"></div>
<div id="springok1"></div>
</body>
</html>
Ext.onReady(function(){
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('name');
if(value=="springok")
cell.style="background-color:red";
return data;
}
//定义列
var columns = [
{header:'编号',dataIndex:'id',sortable:true}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',sortable:false},
{header:'状态',dataIndex:'descn',width:80,renderer:renderMotif}
];
//定义数据
var data =[
['1','张三','描述01'],
['2','李四','描述02'],
['3','王五','描述03'],
['4','springok','springok.com'],
['5','springok','springok.com']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置
{name:'name'},
{name:'descn'}
]
});
//加载数据
store.load();
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'springokgrid', //渲染位置 对应<div id="springokgrid"></div> id值
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
enableColumnMove: false, //禁止拖放列
enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
forceFit:true //自动填满表格
});
});“`
OK，大功告成，看下效果：
ExtJS学习(三)Grid表格的更多相关文章
- ExtJS4.2学习(三)Grid表格（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/172.html --------------- ...
- 深入浅出ExtJS 第三章 表格控件
3.1 表格的特性简介 >.Ext中的表格功能:包括排序/缓存/拖动/隐藏某一列/自动显示行号/列汇总/单元格编辑等实用功能; >.表格由类Ext.grid.GridPanel定义,继承自 ...
- ExtJS4.2学习(四)Grid表格中文排序问题（转）
鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-07/173.html --------------- ...
- sencha/extjs 动态创建grid表格
//创建普通表格 id,父容器,标题,json数据字符串,列名(逗号分隔),json数据key即store的fields属性(逗号分隔) function createCommonTable(id, ...
- [ExtJS5学习笔记]第三十三节 sencha extjs 5 grid表格导出excel
使用extjs肯定少不了使用表格控件,用到表格,领导们(一般)还是惯于使用excel看数据,所以用到extjs表格的技术猿们肯定也会有导出表格excel这一个需求,本文主要针对如何在用extjs将gr ...
- ExtJS学习(四)EditorGrid可编辑表格
操作表格有一种需求,要操作表格需要动态的添加内容,删除内容以及双击的时候进入编辑状态.这个时候怎么办呢,看具体的实现吧. 双击点击的时候可以单元格的操作. 代码: <!DOCTYPE html& ...
- iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作 环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
- ExtJs 日期相加，Grid表格列可编辑
1.日期相加: Ext.Date.add(new Date(), Ext.Date.DAY, 15) 2.Grid表格列可编辑: { header : "实际已交货量", ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
随机推荐
- 【Luogu P2709 小B的询问】莫队
题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...
- hdu 5591 BestCoder Round #65（博弈）
题意: 问题描述 ZYBZYB在远足中,和同学们玩了一个“数字炸弹”游戏:由主持人心里想一个在[1,N][1,N]中的数字XX,然后玩家们轮流猜一个数字,如果一个玩家恰好猜中XX则算负,否则主持人将告 ...
- [APIO2010]
A.特别行动队 n<=1000000 看了数据范围和题目感觉就像是斜率优化,然后瞎推了一波式子,没想到A了. sij表示i+1到j的权值和. j比k优秀 $$fj+a*sij^{2}+b*si ...
- bzoj省选十连测推广赛
A.普通计算姬 题意:给丁一棵树,每个点有一个权值,用sum(x)表示以x为根的子树的权值和,要求支持两种操作: 1 u v :修改点u的权值为v. 2 l r : 求∑sum[i] l&l ...
- centos下 apache+mysql+php的安装
一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...
- springboot由于mysql表类型导致的 setRollbackOnly() 事务不回滚
在SpringBoot 中,使用事务非常简单,只需在方法上面加入 @Transactional 注解就可以实现.也可加在类上,此时则类中所有方法都支持事务. 而当我使用下面代码时,发现事务却没有回滚 ...
- font-spider利器对webfont网页字体压缩使用
http://font-spider.org/ npm install font-spider -g hyheilizhitij(汉仪黑荔枝体简) //引入 @font-face{ font-fami ...
- java海量大文件数据处理方式
1. 给定a.b两个文件,各存放50亿个url,每个url各占64字节,内存限制是4G,让你找出a.b文件共同的url? 方案1:可以估计每个文件安的大小为50G×64=320G,远远大于内存限制的4 ...
- [ SSH框架 ] Hibernate框架学习之二
一.Hibernate持久化类的编写规范 1.什么是持久化类 Hibernate是持久层的ORM影射框架,专注于数据的持久化工作.所谓持久化,就是将内存中的数据永久存储到关系型数据库中.那么知道了什么 ...
- android 欢迎界面的制作
再打开手机app的时候,最先映入我们眼帘的是一个覆盖手机全屏的欢迎界面,在这个界面显示出来的时候整个手机屏幕只会显示这一个界面,上面的标题栏,以及手机最顶端的状态栏都会消失,只有欢迎页面结束跳转到其他 ...