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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
js变量以及其作用域详解
Jul 18 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
JS中Array数组学习总结
Jan 18 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
Vue通过配置WebSocket并实现群聊功能
Dec 31 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实现mysql数据库备份类
2008/03/20 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
百度小程序自定义通用toast组件
2019/07/17 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python程序 创建多线程过程详解
2019/09/23 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
python实现简单颜色识别程序
2020/02/19 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
Shell编程面试题
2012/05/30 面试题
部队领导证婚词
2014/01/12 职场文书
大学校庆策划书
2014/01/31 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS