Extjs教程第五章使用grid显示数据.docx

Extjs教程第五章使用grid显示数据.docx

《Extjs教程第五章使用grid显示数据.docx》由会员分享，可在线阅读，更多相关《Extjs教程第五章使用grid显示数据.docx（27页珍藏版）》请在冰豆网上搜索。

Extjs教程第五章使用grid显示数据

使用grid显示数据

毫无疑问，grid是Ext中使用最广泛的组件之一。

我们需要以一种易于理解的方式为最终用户展现我们的数据，电子表格就是这种方式之一，而且相当完美——应为它做到了，并且让这一观念深入人心。

Ext接受了该观点，并使得它更加灵活而且奇妙。

在这一章中我们会：

∙使用GridPanel来在用户友好的表格中展示结构化的数据；

∙从服务器或数据库加载数据显示在表格中；

∙使用表格提供的事件来控制表格的功能和显示；

∙在表格中采用高级的数据格式化技术；

∙建立分页表格。

我们将说明如何定义表格的行和列，但是更为重要的是，我们将学习如何使表格更为美观。

我们可以添加自定义渲染的单元格，并且在其中添加图片，我们还可以根据数据值来改变显示样式。

到底什么是表格？

Ext的表格和电子表格相似，包含2个重要的部分：

∙行

∙列

在这里，我们的列是：

Title,Released,Genre,和Price。

每一行包含像TheBigLebowski,SuperTroopers之类的电影。

这些行都是我们的数据；表格中的每一行代表数据中的一条记录。

在GridPanel中显示结构化的数据：

在表格中显示数据需要两个Ext组件：

∙store——像数据库一样，追踪要显示的数据；

∙表格面板——提供展现store中数据的方式。

在我们开始来实现这些之前，让我们先来看看将被我们使用到的术语，因为这些术语可能会把我们搞糊涂：

∙Columns（列）：

它引用整个数据列，包含显示数据有关的信息，包括列的head（列标题），在ExtJS中，这些都是ColumnModel（列模型）的一部分；

∙Fields（字段）：

它也引用了真个数据列，但是它引用的是实际的数值。

在ExtJS里，它被在reader（Ext读取数据的组件）中，用来加载数据。

建立datastore（数据容器）：

我们需要做的第一件事就是建立我们的数据，它将会被放到datastore之中。

datastore有不同的类型，可以让我们读取不同形式的数据（XML，JSON等等），并且可以在不同的Ext控件中来完成读取数据的过程。

不管数据是JSON，XML还是数组，甚至是我们自己自定义的数据类型，我们都可以通过相同的方式访问，这要感谢datastore。

下面是一些Ext中默认的datastore类型：

∙Simple（Array）（数组）

∙XML

∙JSON

Acustomdatastorecouldbecreatedtoreaddatathatdoesnotfitintothesecategories.

可以创建自定义的datastore来读取其他类型的数据。

Ext论坛提供了一些用户贡献的datastore，例如CSV和ColdFusion形式的数据。

在datastore中添加数据：

初次尝试，我们将建立一个以本地数组为数据源的表格。

接下来我们使用到的数据来自一个小的电影数据库，其中包含了一些我最喜爱的电影，这与这章后面用到的来自真实数据库的数据很相似。

Thedatastoreneedstwothings:

thedataitself,andadescriptionofthedata—or

whatcouldbethoughtofasthefields.

datastore需要两个东西：

数据本身和数据描述——如同字段以及其它你能想到的类似的东西。

reader（读取器）读取器将被用来读取来自数组的数据，在其中我们会定义数组数据的字段名（field）。

读取器相当于一个翻译，它将数据字符串翻译为一行一行的数据来供Ext使用。

接下来的代码应该被放到Ext的OnReady函数内部：

varstore=newExt.data.Store（{

data:

[

[

1,

"OfficeSpace",

"MikeJudge",

"1999-02-19",

1,

"WorkSucks",

"19.95",

1

],[

3,

"SuperTroopers",

"JayChandrasekhar",

"2002-02-15",

1,

"AlteredStatePolice",

"14.95",

1

]

//...morerowsofdataremovedforreadability...//

],

reader:

newExt.data.ArrayReader（{id:

'id'},[

'id',

'title',

'director',

{name:

'released',type:

'date',dateFormat:

'Y-m-d'},

'genre',

'tagline',

'price',

'available'

]

}）;

如果我们在浏览器中查看这段代码，我们不会看到任何东西——因为datastore只是用来加载并跟踪数据的一种方式。

现在浏览器的内存中已经有我们的数据了。

现在我们只需要决定怎样将它显示给用户。

为datastore定义数据：

reader需要知道从数据存储器中读取哪些字段，所以我们需要定义这些字段。

字段使用由对象组成的数组来定义——如果数据被挨个读取，那么只需要指定这个字段的名称就可以了。

在这个例子中，除了一个字段，其他的都可以通过简单的命名来定义。

举个例子，标题字段可以用如下的对象来定义：

{name:

'title'}

然而，在我们的用例中，因为我们仅仅把这个字段以一个字符串的形式读取，我们可以简单的定义这个字段的名称以减少一些输入：

'title'

released字段很特殊，是因为我们需要适当处理它的数据，设置它的type为data。

对于每种字段格式类型（type），都有一些选项来更明确的定义它的格式。

使用日期类型（datetype）时，还需要定义dateFormat（时间格式化）属性，它是一个字符串（本例中是'Y-m-d'）。

如果你用过PHP的话，时间格式化字符串看起来很熟悉，因为Ext使用了与PHP相似的时间格式化字符串。

{name:

'released',type:

'date',dateFormat:

'Y-m-d'}

指定的数据类型：

ExtJs有许多途径来适当读取特定数据类型，它们都列在下面：

字段类型

说明

信息

string

字符串数据

int

数字

使用JS的parseInt函数

float

浮点型数字

使用JS的parseFloat函数

boolean

true/false

date

日期数据

需要dateFormat配置

以下是一些我经常使用的数据类型：

字段类型

说明

用法

date

包含信息的数据

你需要定义dateFormat，它告诉Ext如何把字符串转化为日期。

Y-m-d代表了“4字符的年-数字月-数字日”

Ext中的dateFormat和PHP一样，一下连接有对格式化日期的详细说明：

int

数字数据

将数值视为整数——int数据常常可以用来做比较，进而完成一些事情，如对两列数据求和。

boolean或者bool

True/False

注意布尔值展现的各种形式，你可以把一个字符串强制转化为布尔值，也可以用0、1分别转化为布尔值。

如果我们仅仅用刚才的reader显示数据的话，最终会是这样的结果：

看上去很丑陋，近乎让人崩溃：

∙released列的type设置为date，也被从字符串转化日期，但是其展现形式却是标准的且丑陋的JS的日期格式——幸运的是，Ext可以让它看上去更漂亮；

∙price列被设置为浮点数，但是这里并不需要精确到小数；

∙Avail列被解析成布尔值，即便原始数据不是一个true值。

这就是为什么要指定数据类型并且添加一些特殊的选项的原因。

显示GridPanel（表格面板）：

将所有的东西集成到一起的就是GridPanel，它专注于将数据放置到行跟列中，连同列标题，并将所有的东西做简洁的封装。

对任何人来说，只是将电影的数据存放于电脑的内存中并不是够，我们需要在表格中展现它：

1.把datastore放在GridPanel的代码中：

Ext.onReady（function（）{

//addyourdatastorehere

vargrid=newExt.grid.GridPanel（{

renderTo:

document.body,

frame:

true,

title:

'MovieDatabase',

height:

200,

width:

500,

store:

store,

columns:

[

{header:

"Title",dataIndex:

'title'},

{header:

"Director",dataIndex:

'director'},

{header:

"Released",dataIndex:

'released',

renderer:

Ext.util.Format.dateRenderer（'m/d/Y'）},

{header:

"Genre",dataIndex:

'genre'},

{header:

"Tagline",dataIndex:

'tagline'}

]

}）;

}）;

在浏览器中，你看到的将是这样：

究竟是怎么做到的呢？

我们的datastore和一个决定column（列）跟columnheader（列标题）应该怎样被显示的（columnmodel）列模型加载到了表格中。

和先前在reader中定义的字段不同，由于现在已经被定义了，所以reader知道怎么去读数据。

配置GridPanel：

TheGridPanelisthewidgetthattieseverythingtogether:

Ext.grid.GridPanel

GridPanel是一个将一切捆绑到一起的控件，我们只需要一些基础的东西来建立它：

字段类型

说明

用法

renderTo

说明GridPanl显示的位置

它的值需要是一个有效的DOM对象，或者DOM元素的id。

接下来，我们将会吧GridPanl直接传给其他控件，所以这个配置项将可以不做设置。

frame

为GridPanel加框

为GridPanel添加一个漂亮的边框，这项不是必须的，但是会使得GridPanel在渲染时更加漂亮。

height和width

定义GridPanel的大小

高度是必须被定义的，因为grid不会自己计算表格的高度。

但是当我们在布局（layout）中添加grid时，这项就不需要了。

store

我们的数据

对包含数据的datastore的引用。

columns

Columnmodel（列模型）

定义GridPanel中列的数组。

stripeRows

设置行条纹

当该项为true时，行的颜色将交替变化。

gridpanel的基本的设置大概象这样：

vargrid=newExt.grid.GridPanel（{

renderTo:

Ext.getBody（）,

frame:

true,

title:

'MovieDatabase',

height:

200,

width:

500,

store:

store,

columns:

[insertcolumnshere]

}）;

我们几乎可以象读句子一样来读懂这段配置：

将我们的grid渲染到页面的body当中，为其加边框，给他一个‘MovieDatabase‘的标题。

它的高度为200，宽度为500；它将使用我们的store作为datastore，并且有指定的列模型。

TheonereasonwhyIloveobject-basedconfigurationsomuchisthatitishumanreadable.

我喜欢基于对象的配置方法的原因之一就是它的易读性。

我们不在用去打开手册查找函数x的第三个参数是什么！

只要简单的说“让高为200宽为500”就可以了。

定义grid的列模型：

为了定义我们的表格列，我们需要先创建一个定义了这些列应该怎么显示、处理的对象数组。

columns:

[

{header:

'Title',dataIndex:

'title'},

{header:

'Director',dataIndex:

'director'},

{header:

'Released',dataIndex:

'released'},

{header:

'Genre',dataIndex:

'genre'},

{header:

'Tagline',dataIndex:

'tagline'}

]

columnheader（列标题）看上去像这样：

列模型中的每个列有很多配置项，但是必须至少定义header和dataIndex。

header用来说明列标题（columnheader）的内容，dataIndex表示列中数据字段的名字——我们在建立reader的时候已经定义好了这些。

这里还有其它一些列模型的比较有用的配置选项：

选项

说明

用法

renderer

定义数据的显示形式

格式化该列的数据，使其变成我们需要的形式。

所有类型的数据都可以被转化，我们将在接下来的几章里做进一步学习。

hidden

隐藏该列

布尔值，决定是否显示该列

width

定义列的宽度，单位像素

定义列的宽度，默认100像素，超出的部分被隐藏起来。

sortable

决定该是否对该列进行排序

布尔值，决定该列是否能够被排序。

使用cellrenderer（单元格渲染器）：

我们可以使用单元格渲染来干一些漂亮活。

对于如何使得单元格变漂亮以及让它包含更多我们想要的东西来说，几乎没有任何阻碍。

我们需要做的，只是定义好ExtJS为我们提供的单元格内置格式化函数。

如usMoney，或者建立我们自己的cellrenderer（单元格渲染器）。

让我们先看下如何使用内置的cellrenderer，接下来再建立自己的cellrenderer。

利用内置的cellrenderer格式化数据：

很多内置的格式化函数是用来满足通常的渲染需求的。

其中我常常用到的是daterenderer：

renderer:

Ext.util.Format.dateRenderer（'m/d/Y'）

还有一些renderer包含了一些常用的格式化功能，如货币（这里指的是格式化为货币符号），大写，小写。

这里给出一些人们经常要用到的renderer：

Renderer

说明

用途

dateRenderer

格式化用来显示的日期

格式化该列日期为你喜欢的形式，所有形式的日期都可以被转化。

uppercase

lowercase

大写和小写转化

转化字符串为完全大写或者小写。

Capitalize

美化文本

格式化文本，让它的大小写都正确。

建立可查询的datastore——自定义单元格渲染：

我们将重点聚焦到’genre’一列上，它里面的值都是数值，我们现在的需求是，能够通过查询在“表单”一章中的datastore来找到genre数字对应的文本信息。

首先，我们需要往columnmodel中添加一个renderer配置，告诉表格在单元格渲染的时候使用哪个函数：

{header:

'Genre',dataIndex:

'genre',renderer:

genre_name}

现在，我们来写这个函数。

这个函数传递了单元格中的值作为第一个参数。

第二个参数是单元格对象本身，第三个参数是该表格的datastore——这两个我们都不需要，所以让我们先不去管它们。

functiongenre_name（val）{

//genres就是之前第三章中的那个simpleStore

returngenres.queryBy（function（rec）{

if（rec.data.id==val）{

returntrue;

}else{

returnfalse;

}

//如果匹配，则返回相应的文本内容

}）.itemAt（0）.data.genre;

}

renderer函数传递了单元格当前的数值。

这个数值可以被检验并且可以被修改——任何return回来的数值都会被渲染在单元格上。

queryBy的作用是从store中过滤数据，它接收一个函数来比较每一行的数据，当return为true时，它就使用匹配的行。

为了方便考量，我们现在提供这个函数的另一个版本，它和上面的函数功效相同，但是不如第一个易读：

functiongenre_name（val）{

returngenres.queryBy（function（rec）{

returnrec.data.id==val;

}）.itemAt（0）.data.genre;

}

合并两列数据：

上面介绍的能够查询datastore的renderder很有用。

但是，更为经常使用的一个功能是，我们会合并两列为一个单元格，例如，相加两列数值，求平均，求差值，或者合并两列字符串。

以电影标题（tilte）列举例，我们可以把tagline和它合并，这样我们就不需要tagline这一列了。

首先，我们需要在columnmodel中把tagline这一列的hidden属性设置为true，即隐藏该列。

{header:

'Tagline',dataIndex:

'tagline',hidden:

true}

接下来配置renderer函数，让它来完成合并列的工作：

functiontitle_tagline（val,x,store）{

return''+val+'
'+store.data.tagline;

}

在这个函数里，我们title加粗，用以区分title和tagline（其实作者还在中间加了换行呢，哈哈）。

你可以看到，HTML标签在这里同样好用。

最后，不要忘了把这个函数加到columnmodel里啊：

{header:

'Title',dataIndex:

'title',renderer:

title_tagline}

现在的title列如下所示：

生成HTML和图片：

让我们为每行添加图片来显示每个电影的封面（cover），我们之前发现可以在cell中使用HTML语言，那么现在我们可以通过添加标签，并且在src中指定图片路径来完成这一功能。

functioncover_image（val）{

return'';

}

别忘了设置column的renderer：

{header:

'Cover',dataIndex:

'coverthumb',renderer:

cover_image}

现在的grid看起来是这样的：

内置特性：

Ext有很多好的内置特性，用来完成更好的电子表格界面。

每一列都有一个内置的菜单，提供排序，显示/隐藏列的功能。

客户端排序：

除非指定grid为服务器端排序，否则Ext是可以在客户端对列进行排序。

服务器端排序用在分页数据，或者数据格式不能被客户端排序的时候。

客户端排序快捷、简单而且是内置的：

{header:

'Tagline',dataIndex:

'tagline',sortable:

true}

我们也可以在grid渲染完毕后再实现排序功能;

varcolmodel=grid.getColumnModel（）;

colmodel.getColumnById（'tagline'）.sortable=true;

我们的列模型（columnmodel）控制着列和列标题的显示。

如果我们能从grid中获得columnmodel的引用，那么我们就可以在渲染后改变列。

我们通过使用getColumnById函数来获得某列，只需传递该列的ID到此函数。

隐藏/显示列：

利用列标题（columnheader）中的菜单，我们可以让某列显示或者隐藏。

在配置里我们也可以对这一属性做设置，让列默认为隐藏的，如下所示：

{header:

"Tagline",dataIndex:

'tagline',hidden:

true}

我们经常在表格渲染完毕后执行列的隐藏，我们可以使用Ext提供的函数来实现这一令人兴奋的功能：

Varcolmodel=grid.getColumnModel（）;

colmodel.setHidden（colmodel.getIndexById（'tagline'）,true）;

获取columnmodel的引用可以让我们对列的显示加以改变。

列（column）的渲染：

我们可以通过拖拽列标题（columnheader）来实现列之间的重新排序。

这都是Ext表格的内置功能。

所有的列都可以被任意的拖拽。

以上显示的过程是吧price拖到title和director列之间。

我们可以通过把GridPanel中的enableColumnMove属性设置为false来屏蔽列拖拽的功能。

enableColumnMove:

false

列移动的事件——和grid中的其它事件——都可以被监测到并产生相应的响应。

据个例子，我们可以监测列的移动然后弹出信息，告诉用户把列拖到了什么位置：

grid.getColumnModel（）.on（'columnmoved',

function（cm,oindex,nindex）{

vartitle='YouMoved'+cm.getColumnHeader（nindex）;

if（oindex>nindex）{

vardirmsg=（oindex-nindex）+'Column（s）totheLeft';

}else{

vardirmsg=（nindex-oindex）+'Column（s）totheRight';

}

Ext.Msg.alert（title,dirmsg）;

}

）;

很多其他的事件都可以用同样的方式监听到。

grid、datastore、columnmodel都有它们自己可以被监听到的事件，我们将在这章里学到更具体的内容。

在grid里显示服务器端的数据：

利用Ext，我们可以把数据以各种方式添加到页面中。

我们先前为表格添加本地数组数据。

现在我们将要把数据从附加的文件和服务器中取回。

从XML文件中加载电影数