`
ocw356og
  • 浏览: 24588 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

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所产生的选区。
分享到:
评论

相关推荐

    Ext官方中文教程(可打包下载)

    Ext源码概述 Ext与RESTful Web Services 程序设计: 如何合理地规划一个应用程序 如何本地化ext的教程 xtype的含义 扩展Ext中的组件 扩展与插件之间的区别 扩展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...

    Ext Js权威指南(.zip.001

    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简体中文参考手册(PDF&CHM电子档)

    下载Ext 4 开始! 4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器Adapters 13 核心Core...

    EXT 中文帮助手册

    4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...

    EXT 中文手册

    4 Element:Ext的核心 4 获取多个DOM的节点 5 响应事件 5 使用Widgets 7 使用Ajax 9 EXT源码概述 11 揭示源代码 11 发布Ext源码时的一些细节 12 我应该从哪里开始? 13 适配器...

    .net EXT学习资料与源码

     主要包括data,widget,form,grid,dd,menu,其中最强大的应该算grid了,编程思想是基于面对对象编程(oop),扩展性相当的好.可以自己写扩展.自己定义命名空间.web应用可能感觉太大.不过您可以根据需要按需加载您想要的...

    精通JS脚本之ExtJS框架.part1.rar

    9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...

    精通JS脚本之ExtJS框架.part2.rar

    9.5.2 Ext.grid.GroupingView的配置操作 9.6 可拖放的表格 9.6.1 拖放改变表格的大小 9.6.2 在同一个表格里拖放 9.6.3 表格之间的拖放 9.6.4 表格与树之间的拖放 第10章 设计树状结构布局 10.1 TreePanel的...

    JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

    表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同分为JsonStore、SimpleStroe、GroupingStore等。 下面

    轻松搞定Extjs_原创

    六、Ext.Element类中的动画函数 34 七、小结 35 第六章:元素操作与模板 36 一、重要也不重要的东西 36 二、Ext.DomHelper类 36 三、Ext.XTemplate 38 四、小结 39 第七章:格式化 40 一、用户需要优秀体验的内容 40...

    免费 Extjs4.0教程视频

    第一讲: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视频教程和源代码,另附文档翻译

    第一讲: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视频教程配套代码

    第一讲: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概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy 第五讲: EXTJS4.0的读写器Reader, Writer 第六讲: EXTJS4.0的数据集Store...

    ExtJs2.0简明教程

    ………..35 第六章 使用表格控件Grid……….………………………………………………………………………………..……36 6.1 基本表格GridPanel……….…………………………………………………………………………...

    extjs-reactjs-examples:ExtJS到React过渡的代码示例

    以下是本系列所涵盖主题的概述(随着本系列的推出,链接将更新): () 类系统 () () () () 模板化 () (代码) 清单(代码) 网格和树 基本网格(代码) 选择模型(代码) 功能和插件(代码...

    EXTJS 中文手册 电子书

    EXT源码概述 ......................................................................................................... 13 揭示源代码 .......................................................................

    CAD快捷键文档

    一、概述: 所谓的快捷命令,是AutoCAD为了提高绘图速度定义的快捷方式,它用一个或几个简单的字母来代替常用的命令,使我们不用去记忆众多的长长的命令,也不必为了执行一个命令,在菜单和工具栏上寻寻匿匿。所有...

Global site tag (gtag.js) - Google Analytics