extjs 学习笔记(三) 最基本的grid


Posted in Javascript onOctober 15, 2009

jquery在这方面则正好相反,它的UI都以插件形式提供,可以需要什么就引用什么,所以非常小巧灵活,但由于插件往往是由不同的人或者团队来提供,界面和接口往往就不那么一致。反正是各有千秋吧。
今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了。好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能。
一个grid包括一些行和列,在extjs里边,列由Ext.grid.ColumnModel来管理,我们来看看如何创建一个ColumnModel对象:

var cm = new Ext.grid.ColumnModel([ 
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, 
{header: "Price", width: 75, sortable: true, dataIndex: 'price'}, 
{header: "Change", width: 75, sortable: true, dataIndex: 'change'}, 
{header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange'}, 
{header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange'} 
]);

这里定义了五个列,列可以通过参数进行配置:id用来标识列,在css中使用该id可以对整列所有的单元格设置样式,可自动扩充的列也根据这个id来标识;header是列名字;width是列的宽度;sortable用来指明列是否可排序,dataIndex,先不管它。比较常用的参数还有:editable,指示列是否可编辑;renderer,指示列如何来呈现,后边会再详细介绍它。
有了列,我们还需要一些数据来填充行,构造一个数组吧:
var myData = [ 
['3m Co',71.72,0.02,0.03,'9/1 12:00am'], 
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], 
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], 
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], 
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], 
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], 
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], 
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], 
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], 
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], 
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], 
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], 
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], 
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], 
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], 
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], 
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], 
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], 
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], 
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], 
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], 
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], 
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], 
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], 
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], 
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], 
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], 
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], 
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] 
];

现在万事俱备只欠东风了,列定义好了,数据也有了,接下来就是把它们组装成一个grid。看一下完整的代码:
///<reference path="vswd-ext_2.0.2.js" /> 
/**//* 
*作者:大笨 
*日期:2009-10-13 
*版本:1.0 
*/ 
Ext.onReady(function() { 
//构造列 
var cm = new Ext.grid.ColumnModel([ 
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change' }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange' }, 
{ header: "Last Updated", width: 85, sortable: true, dataIndex: 'lastChange' } 
]); 
//构造数据 
var myData = [ 
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], 
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], 
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], 
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'], 
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'], 
['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'], 
['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'], 
['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'], 
['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'], 
['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am'], 
['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am'], 
['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am'], 
['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am'], 
['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am'], 
['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am'], 
['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am'], 
['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am'], 
['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am'], 
['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am'], 
['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am'], 
['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am'], 
['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am'], 
['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am'], 
['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am'], 
['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am'], 
['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am'], 
['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am'], 
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'], 
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am'] 
]; 
//构造grid 
var grid = new Ext.grid.GridPanel({ 
renderTo: "grid", 
store: new Ext.data.ArrayStore({ 
fields: [ 
{ name: 'company' }, 
{ name: 'price', type: 'float' }, 
{ name: 'change', type: 'float' }, 
{ name: 'pctChange', type: 'float' }, 
{ name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' } 
], 
data:myData 
}), 
cm: cm, 
stripeRows: true, 
autoExpandColumn: 'company', 
height: 350, 
width: 600, 
title: 'Array Grid' 
}); 
})

在extjs中,Ext.grid.GridPanel表示一个grid,它需要一个json对象作为参数来进行配置,我们看看用到的配置:
renderTo:指出grid构造出来之后要在哪里呈现,可以是一个元素的id,一个Dom结点或者一个Element对象,如果没有这个参数,就必须调用Ext.grid.GridPanel的render方法来呈现出grid。
stroe:可以简写为ds,以一个统一的接口提供数据给grid,,我们知道数据可能有很多种格式,除了我们用到的数组,还可以是json,xml等等,如果让grid负责来识别每一种数据格式显然不是一个好的设计思想,所以在extjs中有一个专门的类Ext.data.Store来负责数据的格式转换,这里我们用到它的子类ArrayStore,顾名思义,是专门针对数组来进行转换的。我们会专门有一个系列来讨论Ext.data命名空间下边的一些类,那时会对Store类进行深入的了解。现在我们只看看我们用到的fields字段,它是Ext.data.Field类的集合,该类有一个name属性,我们前边在ColumnModel里边置之不理的dataIndex就是引用了这个属性的值来对应列和Field之间的关系,type用来指出类型,默认是字符串类型,dateFormat则指出日期的格式。
cm:colModel的简写,这里放上我们前边构造好的ColumnModel对象就可以了。
stripeRows:是否显示条纹。
autoExpandColumn:自动扩充的列,该列会自动填充grid的空白空间。
height和width:grid的高度和宽度。
title:grid的标题。
现在我们运行一下看看效果,应该说这个grid还算漂亮,在列的名字上点击还能够进行排序,列的宽度可以自由拖动,位置也可以改变。按下ctrl键,我们可以选择多个行。当我们把鼠标移动到列名上,还可以看到出现一个倒立的小三角,点击出现个菜单,可以看到里边能对列进行排序,还可以隐藏列。不过我们也看到,日期的显示并不尽如人意,百分比依然是浮点数,而且我们通常用赤字表示亏损或者现在更为流行的说法负增长,如果在我们的grid里边,负增长也可以用赤字表现出来,效果应该会更好一些。extjs给我们提供了一个很方便的东西来实现我们的想法:renderer。在ColumnModel里边,我们可以给需要的列里边增加renderer来实现我们想要的效果。下边是改动后的ColumnModel:
//构造列 
var cm = new Ext.grid.ColumnModel([ 
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: change }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange }, 
{ header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") } 
]); 
// Change列的renderer函数 
function change(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '</span>'; 
} 
return val; 
} 
// % Change列的renderer函数 
function pctChange(val) { 
if (val > 0) { 
return '<span style="color:green;">' + val + '%</span>'; 
} else if (val < 0) { 
return '<span style="color:red;">' + val + '%</span>'; 
} 
return val; 
}

renderer可以理解为一个“解释器”方法,它用来在显示数据之前转化数据。可以有三种方式来实现renderer:
使用一个返回HTML标记的renderer函数
Ext.util.Format类的一个属性,该属性提供一个renderer函数
一个包括renderer函数和作用域的对象
我们的例子用到了前两种方式。renderer函数传递6个参数,保存了单元格的所有信息,这里只用到了第一个参数,它保存了单元格的值,其它参数的意义我们可以参考帮助文档。
现在运行程序,可以看到我们希望的效果了:负增长用了赤字来表示,作为对比,正的增长用了绿颜色,时间也按照我们希望的格式显示了出来。
有的时候,我们还希望给每一行编号,这个实现起来也很容易,我们只要在ColumnModel的构造函数里边加上new Ext.grid.RowNumberer()就可以了:
var cm = new Ext.grid.ColumnModel([ 
new Ext.grid.RowNumberer(), //实现自动编号 
{ id: 'company', header: "Company", width: 160, sortable: true, dataIndex: 'company' }, 
{ header: "Price", width: 75, sortable: true, dataIndex: 'price' }, 
{ header: "Change", width: 75, sortable: true, dataIndex: 'change', renderer: change }, 
{ header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange', renderer: pctChange }, 
{ header: "Last Updated", width: 120, sortable: true, dataIndex: 'lastChange',renderer:Ext.util.Format.dateRenderer("Y-m-d h:i") } 
]);

Ext.grid.GridPanel的配置里边还有两个常用的参数:
viewConfig:我们可以用这个参数来对grid的界面进行一些设置,详细内容可以查看帮助文档。
selModel:可以简写为sm,选择模型,比如是选择单元格还是选择整个行,默认是选择行。
Javascript 相关文章推荐
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序前端promise封装代码实例
Aug 24 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
JavaScript函数柯里化
Nov 07 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
JavaScript Array扩展实现代码
Oct 14 #Javascript
JavaScript 动态创建VML的方法
Oct 14 #Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 #Javascript
jQuery 标题的自动翻转实现代码
Oct 14 #Javascript
JavaScript 替换Html标签实现代码
Oct 14 #Javascript
JavaScript null和undefined区别分析
Oct 14 #Javascript
JavaScript iframe的相互操作浅析
Oct 14 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
PHP中的output_buffering详细介绍
2014/09/27 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
基于jquery1.4.2的仿flash超炫焦点图播放效果
2010/04/20 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
10个JavaScript中易犯小错误
2016/02/14 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
layui表格数据复选框回显设置方法
2019/09/13 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
关于Node.js中频繁修改代码重启服务器的问题
2020/10/15 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python相似模块用例
2016/03/04 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
斯凯奇澳大利亚官网:SKECHERS澳大利亚
2018/03/31 全球购物
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
Why we need EJB
2016/10/20 面试题
靠谱的活动总结
2019/04/16 职场文书
mysql联合索引的使用规则
2021/06/23 MySQL