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

整体改动（流水帐，不全）
类继承机制变了，多了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的设计思路。

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

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

4.0初步分析
注：4.0中，Grid（grid.Panel）继承自panel.Table，它实现了Grid的绝大多数功能，而Grid自身的代码不过数十行而已。但panel.Table为私有类，所以这里Grid也泛指panel.Table的逻辑。（tree.Panel也继承自panel.Tabel）
ColumnModel弱化拆分了，不再是个独立的对象，而是用于表头及View的配置；
Scrollbar独立出来，作为一个新的组件，也就是说现在Grid的滚动条不再是原生的，而是JS控制联动的；
新增了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）。

结束
个人感觉4.0的Buffered Grid实现机制并不能让人满意，但整个4.0逻辑结构非常好（赞一个，可惜代码也多了一倍，也更难懂了），所以它的可扩展性比3.0强不少，潜力非凡。据初步分析，BufferView可能可以通过改造view.AbstractView来移植到4.0上，并且这样一来，Tree也能Buffer了  当然，可能只是幻想而已……
并且因为改动过大，所以已经用了3.X的XD们只能YY下了