ExtJS 4 Grid组件

咱们正在努力为ExtJS4作准备,到目前为止,咱们已经发布了3个开发者预览版,咱们的目标是争取在4到6周内或争取更快的时间内发布最终版本。在最近的开发者预览版，咱们首次发布了新的Grid组件。新的grid已经重写，并且比3.x版本的有更多功能。新的grid不但大幅提升了性能，并且更加灵活，所以扩展它和增长新的功能比以往更容易。本文将介绍这些新的特性。

智能渲染

在Extjs 3，Grid工做得至关好，不过它是根据“最小公分母”方法来实现其丰富功能的，它始终根据每一个Gird的功能生成全部的标记。在大多数状况下，这显得过于沉重。在ExtJS 4，默认的Grid只有轻量级的标记，以及在渲染时，只附加由开发者定义的功能所需的标记。这使页面渲染速度和Grid性能都得到了巨大的提高。

标准化布局

随着采用新的智能渲染管线，新Grid的许多部件都被制做成特定的组件并集成到标准的布局管理系统里，而不是依赖定制的内部标记和CSS。这样既维持了完美的单像素UI体验，又把Gird和其他框架的渲染处理统一块儿来。

DataView

在ExtJS 4，新的GridView扩展自标准的DataView类，这不只最大限度的减小了重复代码，也使得Gird更容易定制。由于它扩展自DataView，因此新的Grid不管使用任何视图，都可以使用相同的选择模型，包括经过键盘操做的非连续选择。

功能支持

在Extjs 3，很容易为Gird增长新功能，可是没有一个统一标准的方法。许多附加功能都是使用插件方式提供的，而有些是经过继承子类方式提供。这使某些功能结合起来使用至关困难（若是不是不可能）。

在ExtJS 4中，可经过Ext.grid.Feature这个基类灵活的扩展Grid的功能。Grid的底层模版可经过Feature类修改，从而可在Grid视图生成时修饰和改变标记。Feature类提供了强大的替代旧的GridView的子类，这样可使它容易混合和匹配兼容功能。在Grid中新功能的例子包括RowWrap、RowBody和Grouping。

虚拟滚动

ExtJS 4的Grid如今支持在渲染过程当中缓冲数据，它将提供一个虚拟的，数据负载均衡的视图。GRid如今能够轻松支持没有分页的数百甚至上千条的数据，比在ExtJS 3中Grid处理大量数据时的性能提升很多。

编辑改进

在Extjs 3中，开发者要在Grid中实现编辑功能，须要使用Editorgrid，这限制了Grid的灵活性。在ExtJS 4中，可经过Editing插件在任何Grid实例中实现该功能，在全部Grid中均可以重复使用该插件。此外，在ExtJS 3中流行的RowEditor扩展，在ExtJs 4已提高为一个一流的和彻底支持的框架组件。

一个例子

 

下面是一个使用ExtJS 4定义的具体分组功能的基本Grid。在一个例子中涵盖全部新的功能显得不太现实，于是本例子只是让你体验一下新的Grid。正如你所看到的，Grid的定义方式与ExtJS 3很是类似，但分组功能如今定义起来很是简单，再也不象ExtJS 3那样，须要经过定义GroupingView实例来实现。这仅仅是ExtJS 4中灵活性的其中一个例子。此外，分组如今能够直接在标准Store中实现，从而再也不须要使用GroupingStore。

1	Ext . onReady ( function ( ) {
2	Ext . regModel ( ' Teams ' , {
3	fields : [ ' name ' , ' sport ' ]
4	} ) ;
5
6	var teamStore = new Ext . data . Store ( {
7	model : ' Teams ' ,
8	sorters : [ ' sport ' , ' name ' ] ,
9	groupField : ' sport ' ,
10	data : [
11	{ name : ' Aaron ' , sport : ' Table Tennis ' } ,
12	{ name : ' Aaron ' , sport : ' Football ' } ,
13	{ name : ' Abe ' , sport : ' Basketball ' } ,
14	{ name : ' Tommy ' , sport : ' Football ' } ,
15	{ name : ' Tommy ' , sport : ' Basketball ' } ,
16	{ name : ' Jamie ' , sport : ' Table Tennis ' } ,
17	{ name : ' Brian ' , sport : ' Basketball ' } ,
18	{ name : ' Brian ' , sport : ' Table Tennis ' }
19	]
20	} ) ;
21
22	var grid = new Ext . grid . GridPanel ( {
23	renderTo : Ext . getBody ( ) ,
24	store : teamStore ,
25	width : 400 ,
26	height : 300 ,
27	title : ' Sports Teams ' ,
28	items : [ {
29	features : [ {
30	ftype : ' grouping '
31	} ] ,
32	headers : [ {
33	text : ' Name ' ,
34	flex : 1 ,
35	dataIndex : ' name '
36	} , {
37	text : ' Sport ' ,
38	dataIndex : ' sport '
39	} ]
40	} ]
41	} ) ;
42	} ) ;