Ext 4 概述(六)之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所产生的选区。
发表评论
-
java字符串处理
2012-07-06 09:51 637substring() 它有两种形式,第一种是:Stri ... -
经常用到的提取手机、电话、Email联系方式的几个java正则表达式
2012-07-06 09:44 1110经常用到的提取手机、电话、Email联系方式的几个ja ... -
java中的正则表达式详解
2012-07-06 09:37 1275转自:http://gstarwd.i ... -
MTK修改音乐播放器
2012-07-06 09:29 732目标文件:Resource_audply_skins.c ... -
超强 DOM增删改,js日历综合案例实现
2012-07-05 20:44 816DOM增删改,js日历综合案例实现 效果图: 实现 ... -
构建自定义组件
2012-07-03 13:42 807构建自定义组件 ... -
构建自定义组件
2012-07-03 12:15 643构建自定义组件 ... -
Flex文件上传
2012-07-02 10:09 661今天花了一点时间 ... -
Changing the layout direction of a form item in Flex
2012-07-02 10:09 609The following example shows h ... -
Flex 与 JavaScript 实现交互!!
2012-07-02 10:09 705.style{ paddin ... -
OpenCms7.5.3发布
2012-07-01 09:26 8162010年8月18日,OpenCms7.5.3发布。 ... -
挨踢求职之旅
2012-07-01 09:26 465大学的时候,学的 ... -
一些免费,甚至开源的.net开发工具
2012-07-01 09:25 1183一些免费,甚至 ... -
AS类库推荐
2012-06-30 11:12 597AS类库推荐 2011年11月17日 TweenLite ... -
Flex 收藏
2012-06-30 11:12 576Flex 收藏 2010年06月15日 flex官方网址 ... -
as3 字符处理函数
2012-01-20 02:25 1447as3 字符处理函数 2011年04月22日 原地址:h ... -
js+正文规则 高亮搜索关键字(二)
2012-01-20 02:24 632js+正文规则 高亮搜索关键字(二) 2010年11月16日 ... -
常用的正则表达式
2012-01-20 02:24 600常用的正则表达式 2010年09月09日 常用表达式: ... -
四(4)寒假作业
2012-01-19 10:14 615四(4)寒假作业 2012年01 ... -
《墨水心》(Inkheart)
2012-01-19 10:14 513《墨水心》(Inkheart) 2012年01月12日 ...
相关推荐
Ext源码概述 Ext与RESTful Web Services 程序设计: 如何合理地规划一个应用程序 如何本地化ext的教程 xtype的含义 扩展Ext中的组件 扩展与插件之间的区别 扩展Ext的新手教程 Ext的类继承 从源码生成Ext 基础用法...
下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器Adapters 13 核心Core...
1.3 ext js 4概述 / 15 1.4 ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1 ext designer / 18 1.4.2 在visual studio中实现智能提示 / 23 1.4.3 spket / 28 1.4.4 在eclipse中实现智能提示 / 32 1.5 ...
下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器Adapters 13 核心Core...
4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...
4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...
主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...
9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...
9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...
表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 下面
六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]...
第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy 第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store...
………..35 第六章 使用表格控件Grid……….………………………………………………………………………………..……36 6.1 基本表格GridPanel……….…………………………………………………………………………...
以下是本系列所涵盖主题的概述(随着本系列的推出,链接将更新): () 类系统 () () () () 模板化 () (代码) 清单(代码) 网格和树 基本网格(代码) 选择模型(代码) 功能和插件(代码...
EXT源码概述 ......................................................................................................... 13 揭示源代码 .......................................................................
一、概述: 所谓的快捷命令,是AutoCAD为了提高绘图速度定义的快捷方式,它用一个或几个简单的字母来代替常用的命令,使我们不用去记忆众多的长长的命令,也不必为了执行一个命令,在菜单和工具栏上寻寻匿匿。所有...