Ext 4 概述(六)之Grid

数据表格(Grid)

这次升级Ext 4全部重写了Grid组件。显然,诸多理由和原因迫使我们升级Grid,但Ext 4
Grid向后兼容方面真的很难顾全。为此,我们将会提供一份关于Grid在Ext3升级到Ext4的指南。

智能化渲染

旧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体验。

例如,新的HeaderContainer类就很能说明这个问题。Ext3中的列头部(Column
headers)整合到Grid的话感觉是比较生硬的,因此不太容易客制化。Ext4的列头部作出改进,其所使用的HBox标准布局就能够让你在每一列上输入灵活的flex值。

扩展新功能

在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相关功能的演示例子有如下:

  • RowWrap
  • RowBody
  • Grouping
  • Chunking/Buffering

虚拟滚动

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包中去,成为标准类库的一员。

DataView

GridView的父类更改为DataView。这样做的好处不仅减少了代码量,而且使得Grid更容易制定。因为可以直接发挥DataView的选区模型,应用到任意一种的视图,包括那些非连续的选区,例如通过键盘Home、End、PageDown和PageUp所产生的选区。

时间: 2024-09-28 16:06:01

Ext 4 概述(六)之Grid的相关文章

Ext 4 概述(一)

For both extjs and ext core Ext 4概述 Summary: Ext4概述 Author: Brian Moeskau (译者Frank Cheung ) Published: 2011年三月二十九号 Ext Version: Ext 4.x Languages: Chinese   Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南

EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码_javascript技巧

先给大家说下什么是ext ext是一个强大的js类库,以前是基于YAHOO-UI,现在已经完全独立了, 主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面向对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了.   主要包括三个大的文件ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官

Ext 4 概述(四)之 ARIA、Data、Draw、Fx

Ext JS 参考资源 Intro to Ext 4 (video Ext 4 Architecture (video) 通用问题 适配器(Adapters) 之前的各个Ext版本中都可以透过使用适配器(adpaters)的方式转换第三方的JavaScript库为我所用.Ext4的话就没这支歌仔唱了.改朝换代后,Ext JS应用程序的底层库唯一限定为Ext Core.不过我们依然可以继续让Ext Core与别的JS库共存于一个JS运行时(实际上这就是为什么一些JavaScript对象其原型的方法

Ext 4 概述(五)之布局Layout、组件Component、Form

Layout 参考资源 Ext 4 Layouts (video) Ext 4 Layouts (slides ComponentLayout ComponentLayout是一种新型的布局方式,许多复杂的组件就采用这种布局(与之对应的为ContainerLayout,"ContainerLayout"--传统基于容器布局的新名字)来计算内置元素的大小尺寸,以响应resize的调用.Field字段组件的FieldLayout布局,关于labell控件和input元素控件的大小尺寸和定位

Ext 4 概述(三)之Env命名空间 & 语言增强包 & Ext.Function

Env命名空间 提供浏览器和操作系统的相关信息,还有告诉我们现代浏览器提供了什么功能. Ext.env.Browser 该类提供了全部浏览器的元信息(名称.引擎.版本.是否 Strict 模式等等. Ext.env.FeatureDetector 这是一个在 Ex JS 3 中没有类,完全新的功能,其功能在于检测浏览器特性如何,主要针对现代 HTML5 和 CSS3 的特性,包括移动平台在内的特性列表,有: CSS 变形.动画.转换 Canvas.SVG.VML 触控能力.方向 导航 Geolo

Ext 4 概述(二)之Ext Core

Ext Core 新型类系统 参考资源 Ext JS 4的倒数:动态加载和新的类机制(上) Ext JS 4的倒数:动态加载和新的类机制(下) Ext JS 4 的类机制主要围绕传统OO模型而设计,弥补了Prototype OO不足.虽然性质上仍为模拟的手段,但包含了比较完整的OO特征,并且保持对旧Ext3类机100%兼容.Ext JS 4(连同 Ext Core)提供的新功能有: 继承方面Ext.defined代替了原来Ext.extend的写法. 自动计算依赖关系及动态类加载. 多态 静态成

Ext 4 概述(七)之面板Panel & 杂项

  面板Panel 支持了边界接触(Docking) Panel的改变之一便是通过面板特定的组件布局类(a panel-specific ComponentLayout)来负责管理其边界内所接触的元素项.面板body元素会铺张至任何空白的位置.任何组件都可以通过设置目标面板的dockedItems配置项属性来相接触,而且对方面板的dock属性也要与之设置好才行.如此一来,Ext3中困难重重的水平界工具条现今已大幅改进其灵活性,在Ext4中轻而易举地实现上述功能. 头部Header的改进 头部He

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),不过我们

Ext JS 4 概述

Ext 4概述 全文详见:http://www.sencha.com/learn/Guide:Ext_4_Overview(Chinese) Ext 4有志诚成为Web程序其革命性的开发平台.框架中的每一个首要的组件几乎都作了改善,而且属于相当大幅度的改善.对于Ext3来说--4.0许多组件以及子系统都是表现得焕然一新!本指南会向您提供有关Ext3到Ext4期间变化所呈现的一方面. 如果您在阅读本文档时正好发现任何问题,请积极反馈,或来到Sencha论坛<迁移Ext3到Ext 4>的帖子还有来