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文件中加载电影数
升级会员 