ExtJs 4.0 新结构及Buffered Grid实现分析

ExtJs 4.0出来也有一段时间了,改动真的很大,说是完整重构了一遍都不为过。这几天为了找思路便专心看源码,总算弄清了点眉目。

[b]整体改动(流水帐,不全)[/b]
类继承机制变了,多了mixin、calParent等新的东西,更方便扩展;
Store增加了缓存机制及动态切换分页(range)的接口,可以实现预读及本地快速切换;
类继承关系变了,多了一堆AbstractXXX的类,还没弄懂它们拆分出来的意义;
组件(Component)变了,它自身也有componentLayout了,与Container的Layout区分开;
Panel及其它复杂组件更OO了,例如header也是个Container,含icon、title、spacer、tool等组件,以HBox(或VBox)布局;
Grid的View与旧版的DataView整合了,如今是view.View -> view.Table -> grid.View,其它的各种实现都改了,后面再说。
Tree几乎完全重构,如今也是由Panel, View, Store组合。在3.X中Store只用于存储单维数组,4.0中加了一个TreeStore直接存储树结构,然后tree.View自己又创建一个NodeStore作中介,将TreeStore转换成1维,以方便从view.Table继承而来的View使用。
其它的暂时没有时间精力去研究,有兴趣的可以自己翻源码,一起讨论下4.X的设计思路。

[b]Grid新结构分析[/b]
此次主要是为了Buffered Grid而来,想看看它与3.X中的BufferView有何区别,找点实现Buffered Tree的思路。以下便是我的分析:

3.X中Grid主要由4大块组成: Panel, ColumnModel, Store, View,它们是必不可少的。
Panel: 负责主要界面布局
ColumnModel: 定义元数据属性与列的映射
Store: 存储元数据
View: 监听Store,即时更新界面html

4.0初步分析
[color=gray]注:4.0中,Grid(grid.Panel)继承自panel.Table,它实现了Grid的绝大多数功能,而Grid自身的代码不过数十行而已。但panel.Table为私有类,所以这里Grid也泛指panel.Table的逻辑。(tree.Panel也继承自panel.Tabel)[/color]
ColumnModel弱化拆分了,不再是个独立的对象,而是用于表头及View的配置;
Scrollbar独立出来,作为一个新的组件,也就是说[b]现在Grid的滚动条不再是原生的,而是JS控制联动[/b]的;
新增了features配置,它会在各主要逻辑处作注入执行,方便扩展;
(其它的没细看,主要是分析Buffered功能)

这里的重点就是Scrollbar了,Buffered Grid的实现主要就是依赖它。因为它目前是独立、模拟的,因此可以很方便地在JS联动过程中进行缓存处理。以文字描述一次滚动条移动的处理流程:

1. Scrollbar监测到scroll事件
2. 根据滚动条位置、行高、列表高、元数据总条数等信息,计算出当前位置应该显示哪些条元数据(Record)
3. 调用Store的guaranteeRange方法,传入调整后的元数据范围
4. Store自行切换数据,载入指定范围的元数据,并发出datachanged事件
5. View响应datachanged事件,更新视图

这里的guaranteeRange方法被调用后,Store会尝试从预读缓存中快速载入Record,如果没有,则会从服务器请求。
可以看出,它与3.X的BufferView的实现机制完全不同,一个是Store中数据全在,只不过选择性地渲染;一个是Store进行数据切换,还是全部渲染。
以下是个人对它们的看法
BufferView:
实现更优雅,所有Record都在,只在显示层动手脚,不影响数据层。所以,这种方式仍能使用全选。
4.0 Buffered Grid:
因为Scrollbar是JS联动,可控性更强,滚动非常平滑,不会出现BufferView那样滚动过快会看到短暂的渲染空白。但它实质上是以修改Store中的数据实现的,所以全选不可用(Store中只含部分Record)。

[b]结束[/b]
个人感觉4.0的Buffered Grid实现机制并不能让人满意,但整个4.0逻辑结构非常好(赞一个,可惜代码也多了一倍,也更难懂了),所以它的可扩展性比3.0强不少,潜力非凡。据初步分析,BufferView可能可以通过改造view.AbstractView来移植到4.0上,并且这样一来,Tree也能Buffer了 :lol: 当然,可能只是幻想而已……
并且因为改动过大,所以已经用了3.X的XD们只能YY下了 :cry:
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值