Ext JS 4的Grid组件

　　我们正在不懈地努力着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整体效能这双方面均得到极大的提升。  渲染流水线得到了改善，Grid的其他方面亦齐头迈进，不甘人后。许多Grid的部分都被规划成为单独、清晰的Component组件，整合到标准的布局管理系统中，并非旧版中直接处理内部Markup、CSS的那种方式。这使得API可以联合框架的其他强大的特性，进而来统一Grid的渲染流程。而这些过程，仍维持在精确到象素级别（pixel-perfect）的UI体验水准。  新的GridView继承自标准DatView视图。这不仅能够减掉内部冗余代码，而且使得新Grid更轻松地去自定义。继承自DataView所体现的好处，首先便是可以直接借助选区模型（Selection Model）来作为任意的试图，包括那些用键盘选定的非相邻的选区。  在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之子类。  Ext 4 Grid已经可以做到原生支持“按需加载（load-on-demand）”的数据视图了。虽然这是个虚拟视图，但是的确可以能够做到数据的缓冲。无论上百条抑或达上千笔的数据，都可以保证在Grid轻松显示。无疑，这将大大扩充了Grid数据处理能力。  我们依然拿旧版对比一下。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' }] }] }); });