我们正在努力为ExtJS4做准备,到目前为止,我们已经发布了3个开发者预览版,我们的目标是争取在4到6周内或争取更快的时间内发布最终版本。在最近的开发者预览版,我们首次发布了新的Grid组件。新的grid已经重写,而且比3.x版本的有更多功能。新的grid不但大幅提高了性能,而且更加灵活,因此扩展它和增加新的功能比以往更容易。本文将介绍这些新的特性。
智能渲染
在Extjs 3,Grid工作得相当好,不过它是根据"最小公分母"方法来实现其丰富功能的,它始终根据每个Gird的功能生成所有的标记。在大多数情况下,这显得过于沉重。在ExtJS 4,默认的Grid只有轻量级的标记,以及在渲染时,只附加由开发者定义的功能所需的标记。这使页面渲染速度和Grid性能都获得了巨大的提升。
标准化布局
随着采用新的智能渲染管线,新Grid的许多部件都被制作成特定的组件并集成到标准的布局管理系统里,而不是依赖定制的内部标记和CSS。这样既维持了完美的单像素UI体验,又把Gird和其余框架的渲染处理统一起来。
DataView
在ExtJS 4,新的GridView扩展自标准的DataView类,这不仅最大限度的减少了重复代码,也使得Gird更容易定制。因为它扩展自DataView,所以新的Grid无论使用任何视图,都能够使用相同的选择模型,包括通过键盘操作的非连续选择。
功能支持
在Extjs 3,很容易为Gird增加新功能,但是没有一个统一标准的方法。许多附加功能都是使用插件方式提供的,而有些是通过继承子类方式提供。这使某些功能结合起来使用相当困难(如果不是不可能)。
在ExtJS 4中,可通过Ext.grid.Feature这个基类灵活的扩展Grid的功能。Grid的底层模版可通过Feature类修改,从而可在Grid视图生成时修饰和改变标记。Feature类提供了强大的替代旧的GridView的子类,这样可以使它容易混合和匹配兼容功能。在Grid中新功能的例子包括RowWrap、RowBody和Grouping。
虚拟滚动
ExtJS 4的Grid现在支持在渲染过程中缓冲数据,它将提供一个虚拟的,数据负载均衡的视图。GRid现在可以轻松支持没有分页的数百甚至上千条的数据,比在ExtJS 3中Grid处理大量数据时的性能提高不少。
编辑改进
在Extjs 3中,开发者要在Grid中实现编辑功能,需要使用Editorgrid,这限制了Grid的灵活性。在ExtJS 4中,可通过Editing插件在任何Grid实例中实现该功能,在所有Grid中都可以重复使用该插件。此外,在ExtJS 3中流行的RowEditor扩展,在ExtJs 4已提升为一个一流的和完全支持的框架组件。
一个例子
下面是一个使用ExtJS 4定义的具体分组功能的基本Grid。在一个例子中涵盖所有新的功能显得不太现实,因而本例子只是让你体验一下新的Grid。正如你所看到的,Grid的定义方式与ExtJS 3非常相似,但分组功能现在定义起来非常简单,不再象ExtJS 3那样,需要通过定义GroupingView实例来实现。这仅仅是ExtJS 4中灵活性的其中一个例子。此外,分组现在可以直接在标准Store中实现,从而不再需要使用GroupingStore。 1 Ext.onReady(function(){
2 Ext.regModel('Teams',{
3 fields:['name','sport'] 4 }); 5
6 varteamStore=newExt.data.Store({
7 model:'Teams',
8 sorters:['sport','name'],
9 groupField:'sport',
10 data:[
11 {name:'Aaron',sport:'TableTennis'},
12 {name:'Aaron',sport:'Football'},
13 {name:'Abe',sport:'Basketball'},
14 {name:'Tommy',sport:'Football'},
15 {name:'Tommy',sport:'Basketball'},
16 {name:'Jamie',sport:'TableTennis'},
17 {name:'Brian',sport:'Basketball'},
18 {name:'Brian',sport:'TableTennis'} 19 ]
20 }); 21
22 vargrid=newExt.grid.GridPanel({
23 renderTo:Ext.getBody(),
24 store:teamStore,
25 width:400,
26 height:300,
27 title:'SportsTeams',
28 items:[{
29 features:[{
30 ftype:'grouping' 31 }],
32 headers:[{
33 text:'Name',
34 flex:1,
35 dataIndex:'name' 36 },{
37 text:'Sport',
38 dataIndex:'sport' 39 }] 40 }] 41 });
42 });
发表评论
-
动态曲线图的flex实现说明.doc
2012-07-02 12:44 762Author: Allan(吴进刚) 其实现在回想起 ... -
flex 幸运大转盘 代码
2012-07-02 12:44 738>"+testT.originY) ... -
Flex入门之增强型约束条件
2012-07-02 12:44 575增强型约束条件主要用于控件排列时相对于兄弟元素的位置。增强 ... -
Flex基于FXG仪表盘(附全部源代码)三
2012-07-02 12:44 856我们制作好skin后,就要开始试用skin了,首先我们就要 ... -
flex 缩略图处理方式
2012-07-02 12:44 824一种是: 如果DisplayObject对象是存在a ... -
视频聊天网站的研究、发展以及趋势(转)
2012-07-01 10:06 608此文讲述了视频聊 ... -
视频聊天网站的研究、发展以及趋势(转) ...
2012-07-01 10:06 661此文讲述了视频文件聊天网站相干的技术、发展过程和将来的发展 ... -
转载:WebKit介绍及总结(三)
2012-07-01 10:06 746六 . 编译与调试 在 ubuntu-10.04 上 ... -
【转】Adobe 推出支持 iOS 和 BlackBerry 的 Flash Builder 4.5.1 和 Flex 4.5.1 更新版
2012-06-30 16:31 798【转】Adobe 推出支持 iOS 和 BlackBerry ... -
Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系
2012-06-30 16:31 873Actionscript,AS3,MXML,Flex,Flex ... -
Flex调用flash |Call Flash in Flex
2012-06-30 16:31 614Flex调用flash |Call Flash in Flex ... -
如何在flex当中使用swc
2012-06-30 16:31 626如何在flex当中使用swc 2 ...
相关推荐
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码。 1.1.1 Grid组件 ...
ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel实例 ExtJs4 动态加载 Extjs4 带复选框的树(Checkbox tree) Extjs4 新的布局方式 Extjs4 锁定表头(Locking Grid)功能 Extjs4.0 MVC实例 Extjs4.0动态填充...
ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局
extjs树型表格组件的使用示例,详细说明可以参见http://blog.csdn.net/snail_spoor/article/details/39698037
extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
实现extjs4 的树、grid、form、query等大部分组件的功能
总结了Extjs 的Grid组件的使用方法。共享出来希望对大家所有帮助。
EXTJS 上传组件及示例EXTJS 上传组件及示例EXTJS 上传组件及示例
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
Extjs时间选择插件精确到时分秒,里面有详细的使用步骤
第十四讲: EXTJS4.0的高级组件Grid补充01选择模式Selection和表格特性Feature 第十五讲: EXTJS4.0的高级组件Grid补充02插件和其他相关知识 第十六讲: EXTJS4.0的高级组件Tree上 第十七讲: EXTJS4.0的高级组件Tree下 ...
第十四讲:extjs4.0的高级组件grid补充01选择模式selection和表格特性feature 第十五讲:extjs4.0的高级组件grid补充02插件和其他相关知识 第十六讲:extjs4.0的高级组件tree上 第十七讲:extjs4.0的高级组件tree下 ...
Ext各种组件的使用实例,Extjs tree+grid+form+panel 使用实例
学习extjs资料,tree合成grid,很不错的视频文件,值得收藏
第十七讲.ExtJS之Grid组件 第十八讲.ExtJS之ComboBox获取远程数据、网页计算器 第十九讲.ExtJS之组件面向对象编程(一) 第二十讲.ExtJS之组件面向对象编程(二) 项目实战Extjs版在线选课系统:
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接