Ext JS 4的Grid组件

Summary: 介绍Ext JS 4的Grid Ext JS 4 Grid Components
Author: Brian Moeskau(译者：Frank Cheung)
Published: 2011三月七日
Ext Version: 4.x

该文英文版本:http://www.sencha.com/blog/ext-js-4-grid-components

我们正在不懈地努力着Ext JS4。到目前为止所呈送给各位看官的只是程序员预览版本（Developer Perview），不过我们打算在未来四到六个星期之内，就会发布ExtJS 4的最终版本。近期发布一次的程序员版本中附送了最新的Ext JS 4 Grid组件。为着真正发挥Ext JS 4底层能力，我们对Grid组件完全重写，可以说比较起3.x版本将会有显著的改善。4.0在性能和灵活性这两方面尤其得到改善，其中改善灵活性的好处，便是添加Grid的新功能更加容易了。下面就请跟着我们和文字，一起罗列罗列下Grid有哪些最新、最重要的功能。

旧Ext JS 3 Grid工作起来还是蛮不错的。但通过“最小公分母（least common denominator）”的方法论来确定其各种功能的话，很容易带来一点不足的就是，伴随着Grid的每一项功能，都会生成大量的HTML Markup产生。我们不得不面对这个问题。于是在ExtJS 4中，规定Grid的每一项功能，只会根据开发人员设定与否，才会渲染出与之对应功能的Markup在页面上。Grid默认启动时只有为数不多的Markup而已。这样设计API的结果，便是在渲染页面以及Grid整体效能这双方面均得到极大的提升。

标准化布局Standardized Layout

渲染流水线得到了改善，Grid的其他方面亦齐头迈进，不甘人后。许多Grid的部分都被规划成为单独、清晰的Component组件，整合到标准的布局管理系统中，并非旧版中直接处理内部Markup、CSS的那种方式。这使得API可以联合框架的其他强大的特性，进而来统一Grid的渲染流程。而这些过程，仍维持在精确到象素级别水准（pixel-perfect）的UI体验。

数据视图DataView

新的GridView继承自标准DatView视图。这不仅能够减掉内部冗余代码，而且使得新Grid更轻松地去自定义。继承自DataView所体现的好处，首先便是可以直接借助选区模型（Selection Model）来作为任意的试图，包括那些用键盘选定的非相邻的选区。

扩展新功能 Feature Support

在Ext JS 3里面为Grid加入新功能，一般API接口方面有良好的考虑。但现在来看，却没有一种清晰的流程方法去指导，显得比较乱。有时通过写插件（Plugins），有时就写子类。总之扩展Grid的话可能会比较复杂。

要解决上述问题，实质就是提供一种彻底灵活的选项操作。ExtJS 4将引入全新的一个Grid基类，称作Ext.grid.Feature。通过继承这个Feature类，对任何Grid其所在模板（Template）进行修改，就可以控制当前Grid视图生成的Markup结果。Features类跟旧版的GridView相似，但能力更强，也更为有用。之所以有用和强大，是在于其对延续Grid功能这点上表现得更为简单和适配。Grid里头的一些功能如RowWrap、RowBody和Grouping都是Fetures之子类。

虚拟滚动 Virtual Scrolling

Ext 4 Grid已经可以做到原生支持“按需加载（load-on-demand）”的数据视图了。虽然这是个虚拟视图，但是的确可以能够做到数据的缓冲。无论上百条抑或达上千笔的数据，都可以保证在Grid轻松显示。无疑，这将大大扩充了Grid数据处理能力。

编辑单元格控件 Editing Improvements

我们依然拿旧版对比一下。Ext 3里面要编辑Grid单元格，就必须制定EditorGrid类。通过继承方式可能不太灵活。于是 Ext 4就否决了继承的方式，而是采用“插件化”的方式。通过Ext JS4的Editing插件可以自由绑定到任意的Grid的实例，对于全体任何类型的Grid均可使用。于是乎，此举又为提高“灵活性（flexibility）”添泼了一抹浓彩。此外，对于Ext 3中很受大家所欢迎的一款扩展：RowEditor，在这次发布，我们也将RowEditor正式加入的Ext 4包中，成为标准类库的一员。

例子

下面的例子是演示的Ext JS的Grid分组功能的。要逐一显示所有功能，于一例子中的话尚难为之。不过阁下想尝鲜一下Grid的新容貌，下面这个例子就不容错过耶！如阁下所见，配置项什么的都跟Ext 3差别不大。可是那个分组功能，看到没有？不需要写GroupingView了，只是在配置项声明一下就可以了，更简单了。这是体现Ext 4 灵活性的一个地方，还有其他地方呈现Ext 4的新元素，新优点。就好像，普通的Store也可以支持分组了，并入到标准store功能中，用不着继承什么GroupingStore。

Ext.onReady(function() {
   Ext.regModel('Teams', {
       fields: ['name', 'sport']
   });
 
   var teamStore = new Ext.data.Store({
       model: 'Teams',
       sorters: ['sport','name'],
       groupField: 'sport',
       data: [
           { name: 'Aaron', sport: 'Table Tennis' },
           { name: 'Aaron', sport: 'Football' },
           { name: 'Abe', sport: 'Basketball' },
           { name: 'Tommy', sport: 'Football' },
           { name: 'Tommy', sport: 'Basketball' },
           { name: 'Jamie', sport: 'Table Tennis' },
           { name: 'Brian', sport: 'Basketball' },
           { name: 'Brian', sport: 'Table Tennis' }
       ]
   });
 
   var grid = new Ext.grid.GridPanel({
       renderTo: Ext.getBody(),
       store: teamStore,
       width: 400,
       height: 300,
       title: 'Sports Teams',
       items: [{
           features: [{
               ftype: 'grouping'
           }],
           headers: [{
               text: 'Name',
               flex: 1,
               dataIndex: 'name'
           },{
               text: 'Sport',
               dataIndex: 'sport'
           }]
       }]
   });
});