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 相关文章推荐
分页栏的web标准实现
Nov 01 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
domReady的实现案例
Nov 23 Javascript
js常用DOM方法详解
Feb 04 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP多例模式介绍
2013/06/24 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
用Js实现的动态增加表格示例自己写的
2013/10/21 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JavaScript定义类的几种方式总结
2014/01/06 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Python中os.path用法分析
2015/01/15 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
深入理解Python对Json的解析
2017/02/14 Python
Python递归函数定义与用法示例
2017/06/02 Python
python梯度下降法的简单示例
2018/08/31 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
Python 导入文件过程图解
2019/10/15 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
教师先进事迹材料
2014/12/16 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
python实现Nao机器人的单目测距
2021/09/04 Python
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
win10以太网连接不上怎么办?Win10连接以太网详细教程
2022/04/08 数码科技
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技