我们正在不懈地努力着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' }] }] }); });
旧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' }] }] }); });