ExtJS 4 Grid组件

悠悠 2022-05-15 05:12 252阅读 0赞

我们正在努力为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已提升为一个一流的和完全支持的框架组件。

**一个例子**

![image04.png][]

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

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

[image04.png]: http://www.sencha.com/files/misc/image04.png