蚂蚁论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

查看: 53|回复: 0

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

[复制链接]

1923

主题

1

好友

1591

积分

管理员

Rank: 64Rank: 64Rank: 64Rank: 64

  • TA的每日心情
    奋斗
    2016-1-22 16:23
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    荣誉管理 论坛元老 热心会员 活跃会员 最佳新人 灌水之王

    发表于 6 天前 |显示全部楼层
    extjs 学习笔记(三) 最基本的grid
    jquery在这方面则正好相反,它的UI都以插件形式提供,可以需要什么就引用什么,所以非常小巧灵活,但由于插件往往是由不同的人或者团队来提供,界面和接口往往就不那么一致。反正是各有千秋吧。 今天学习extjs中的grid,它可以说是功能强大,无出其右,只有你想不到的,没有它做不到的,呵呵,好像是有点夸张了。好,不说废话了,我们就从最简单的grid开始,一步步来看看extjs给我们提供的grid究竟给我们提供了哪些功能。 一个grid包括一些行和列,在extjs里边,列由ExtgridColumnModel来管理,我们来看看如何创建一个ColumnModel对象: 复制代码 代码如下: var cm = new ExtgridColumnModel([ {id:'pany',header: "**pany", width: 160, sortable: true, dataIndex: 'pany'}, {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',7172,002,003,'9/1 12:00am'], ['Alcoa Inc',2901,042,147,'9/1 12:00am'], ['Altria Group Inc',8381,028,034,'9/1 12:00am'], ['American Express **pany',5255,001,002,'9/1 12:00am'], ['American International Group, Inc',6413,031,049,'9/1 12:00am'], ['ATT Inc',3161,-048,-154,'9/1 12:00am'], ['Boeing Co',7543,053,071,'9/1 12:00am'], ['Caterpillar Inc',6727,092,139,'9/1 12:00am'], ['Citigroup, Inc',4937,002,004,'9/1 12:00am'], ['EI du Pont de Nemours and **pany',4048,051,128,'9/1 12:00am'], ['Exxon Mobil Corp',681,-043,-064,'9/1 12:00am'], ['General Electric **pany',3414,-008,-023,'9/1 12:00am'], ['General Motors Corporation',3027,109,374,'9/1 12:00am'], ['Hewlett-Packard Co',3653,-003,-008,'9/1 12:00am'], ['Honeywell Intl Inc',3877,005,013,'9/1 12:00am'], ['Intel Corporation',1988,031,158,'9/1 12:00am'], ['International Business Machines',8141,044,054,'9/1 12:00am'], ['Johnson  Johnson',6472,006,009,'9/1 12:00am'], ['JP Morgan  Chase  Co',4573,007,015,'9/1 12:00am'], ['McDonald\'s Corporation',3676,086,240,'9/1 12:00am'], ['Merck  Co, Inc',4096,041,101,'9/1 12:00am'], ['Microsoft Corporation',2584,014,054,'9/1 12:00am'], ['Pfizer Inc',2796,04,145,'9/1 12:00am'], ['The Coca-Cola **pany',4507,026,058,'9/1 12:00am'], ['The Home Depot, Inc',3464,035,102,'9/1 12:00am'], ['The Procter  Gamble **pany',6191,001,002,'9/1 12:00am'], ['United Technologies Corporation',6326,055,088,'9/1 12:00am'], ['Verizon **munications',3557,039,111,'9/1 12:00am'], ['Wal-Mart Stores, Inc',4545,073,163,'9/1 12:00am'] ];  现在万事俱备只欠东风了,列定义好了,数据也有了,接下来就是把它们组装成一个grid。看一下完整的代码: 复制代码 代码如下: ///lt;reference path="vswd-ext_202js" /gt; /**//* *作者:大笨 *日期:2009-10-13 *版本:10 */ ExtonReady(function() { //构造列 var cm = new ExtgridColumnModel([ { id: 'pany', header: "**pany", width: 160, sortable: true, dataIndex: 'pany' }, { 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', 7172, 002, 003, '9/1 12:00am'], ['Alcoa Inc', 2901, 042, 147, '9/1 12:00am'], ['Altria Group Inc', 8381, 028, 034, '9/1 12:00am'], ['American Express **pany', 5255, 001, 002, '9/1 12:00am'], ['American International Group, Inc', 6413, 031, 049, '9/1 12:00am'], ['ATT Inc', 3161, -048, -154, '9/1 12:00am'], ['Boeing Co', 7543, 053, 071, '9/1 12:00am'], ['Caterpillar Inc', 6727, 092, 139, '9/1 12:00am'], ['Citigroup, Inc', 4937, 002, 004, '9/1 12:00am'], ['EI du Pont de Nemours and **pany', 4048, 051, 128, '9/1 12:00am'], ['Exxon Mobil Corp', 681, -043, -064, '9/1 12:00am'], ['General Electric **pany', 3414, -008, -023, '9/1 12:00am'], ['General Motors Corporation', 3027, 109, 374, '9/1 12:00am'], ['Hewlett-Packard Co', 3653, -003, -008, '9/1 12:00am'], ['Honeywell Intl Inc', 3877, 005, 013, '9/1 12:00am'], ['Intel Corporation', 1988, 031, 158, '9/1 12:00am'], ['International Business Machines', 8141, 044, 054, '9/1 12:00am'], ['Johnson  Johnson', 6472, 006, 009, '9/1 12:00am'], ['JP Morgan  Chase  Co', 4573, 007, 015, '9/1 12:00am'], ['McDonald\'s Corporation', 3676, 086, 240, '9/1 12:00am'], ['Merck  Co, Inc', 4096, 041, 101, '9/1 12:00am'], ['Microsoft Corporation', 2584, 014, 054, '9/1 12:00am'], ['Pfizer Inc', 2796, 04, 145, '9/1 12:00am'], ['The Coca-Cola **pany', 4507, 026, 058, '9/1 12:00am'], ['The Home Depot, Inc', 3464, 035, 102, '9/1 12:00am'], ['The Procter  Gamble **pany', 6191, 001, 002, '9/1 12:00am'], ['United Technologies Corporation', 6326, 055, 088, '9/1 12:00am'], ['Verizon **munications', 3557, 039, 111, '9/1 12:00am'], ['Wal-Mart Stores, Inc', 4545, 073, 163, '9/1 12:00am'] ]; //构造grid var grid = new ExtgridGridPanel({ renderTo: "grid", store: new ExtdataArrayStore({ fields: [ { name: 'pany' }, { 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: 'pany', height: 350, width: 600, title: 'Array Grid' }); })  在extjs中,ExtgridGridPanel表示一个grid,它需要一个json对象作为参数来进行配置,我们看看用到的配置: renderTo:指出grid构造出来之后要在哪里呈现,可以是一个元素的id,一个Dom结点或者一个Element对象,如果没有这个参数,就必须调用ExtgridGridPanel的render方法来呈现出grid。 stroe:可以简写为ds,以一个统一的接口提供数据给grid,,我们知道数据可能有很多种格式,除了我们用到的数组,还可以是json,xml等等,如果让grid负责来识别每一种数据格式显然不是一个好的设计思想,所以在extjs中有一个专门的类ExtdataStore来负责数据的格式转换,这里我们用到它的子类ArrayStore,顾名思义,是专门针对数组来进行转换的。我们会专门有一个系列来讨论Extdata命名空间下边的一些类,那时会对Store类进行深入的了解。现在我们只看看我们用到的fields字段,它是ExtdataField类的集合,该类有一个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 ExtgridColumnModel([ { id: 'pany', header: "**pany", width: 160, sortable: true, dataIndex: 'pany' }, { 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:ExtutilFormatdateRenderer("Y-m-d h:i") } ]); // Change列的renderer函数 function change(val) { if (val gt; 0) { return 'lt;span style="color:green;"gt;' + val + 'lt;/spangt;'; } else if (val lt; 0) { return 'lt;span style="color:red;"gt;' + val + 'lt;/spangt;'; } return val; } // % Change列的renderer函数 function pctChange(val) { if (val gt; 0) { return 'lt;span style="color:green;"gt;' + val + '%lt;/spangt;'; } else if (val lt; 0) { return 'lt;span style="color:red;"gt;' + val + '%lt;/spangt;'; } return val; }  renderer可以理解为一个“解释器”方法,它用来在显示数据之前转化数据。可以有三种方式来实现renderer: 使用一个返回HTML标记的renderer函数 ExtutilFormat类的一个属性,该属性提供一个renderer函数 一个包括renderer函数和作用域的对象 我们的例子用到了前两种方式。renderer函数传递6个参数,保存了单元格的所有信息,这里只用到了第一个参数,它保存了单元格的值,其它参数的意义我们可以参考帮助文档。 现在运行程序,可以看到我们希望的效果了:负增长用了赤字来表示,作为对比,正的增长用了绿颜色,时间也按照我们希望的格式显示了出来。 有的时候,我们还希望给每一行编号,这个实现起来也很容易,我们只要在ColumnModel的构造函数里边加上new ExtgridRowNumberer()就可以了: 复制代码 代码如下: var cm = new ExtgridColumnModel([ new ExtgridRowNumberer(), //实现自动编号 { id: 'pany', header: "**pany", width: 160, sortable: true, dataIndex: 'pany' }, { 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:ExtutilFormatdateRenderer("Y-m-d h:i") } ]);  ExtgridGridPanel的配置里边还有两个常用的参数: viewConfig:我们可以用这个参数来对grid的界面进行一些设置,详细内容可以查看帮助文档。 selModel:可以简写为sm,选择模型,比如是选择单元格还是选择整个行,默认是选择行。
    您需要登录后才可以回帖 登录 | 立即注册

    关闭

    蚂蚁站长论坛推荐上一条 /1 下一条

    QQ|Archiver|手机版|广告服务|蚂蚁站长-站长之家 ( 黔ICP备16008478号-1  

    GMT+8, 2017-10-19 07:41

    Powered by 站长论坛

    © 2007-2013 Jzant.com Inc.

    回顶部