Ext扩展——LiveDataPanel的简介

在数据量不太大的负荷的情况下，要求Grid显示数白行记录是绰绰有余的，若一子来50千行数据呢？这绝对不是“小儿科”，势必对客户编构成极大的压力，不论是网络通迅还是内存的占用。一般针对该情形，我们用分页就解决了呢。当然我们熟悉，“分页”总是“前一页”、“下一页”的横向动作去翻页，但如果换了垂直形式上下翻页呢？其实也是一种方案。这对于客户端性能或者用户体验有着苛刻要求的人，可能将是另外一种设计模式。本文所介绍的正是这种的设计。

整个过程都使用XHR交互数据库的记录，增强引用户体验而又不影浏览器内存从而提出了性能，该插件也称“缓冲式”加载，它会随着滚动条的上下翻页获取所需显示的行，因此它有一个缓冲区专门存放一组记录的地方，得下区上批记录需要显示的时候又放到缓冲。

社区中就有这样的扩展， 命名空间是Ext.ux.LiveDataPanel，——复用了该基础扩展就可以减少了底层开发的工作。演示的例子 。

 

LiveDataPanel可说是Live Grid的简化版，原理上与LiveGrid 非常相似，都是使用滚动条的上下移动，发送指令，以此异步获取分段数据（即on-demand data loading）。使用LiveDataPanel不会一次性把符合条件的记录都载入客户端内存中，而是“要显示多少就取多少”，因而要了解这是一个逐渐累加的过程。开发者应注意哪些场合适合LiveDataPanel使用，因为占有的内存只会增多而不会自动消除的。

用过Ext.DataView的用户可能会对LiveDataPanel的配置方式感到熟悉。设置过程同样要设置一个Ext.data.Store作为数据源，同样要一个Ext.XTemplate作为HTML模板.下面是针对某一博客而作的LiveDataPanel：

// Creating the panel is easy var p = new Ext.ux.LiveDataPanel({ frame: true, title: 'Latest Blog Entries', height: 400, width: 590, itemSelector: '.entry', tpl: Ext.XTemplate.from('tplBlog'), store: myStore }); p.render('entry-list');

另外还有其他的配置项。例如，配置项loadingIndicatorTxt是刷新时的文字，配置项limit是规定的记录数（默认是10笔记录）。

本文结束之前不妨谈谈Ext的社区，主要则重技术方面。在网络社区中还有许许多多Ext的扩展或插件，无一都是为了增强框架的能，尽可能避免让大家重复“制造轮子”。大家可以在以下两处地方获取其资源：

• 扩展专区
• 论坛板块

同样官方extjs.com的态度也是对参与扩展或插件的这方面工作予以有力支持的，并且认为这个项目中不可或缺的一部分，对于优秀的作品及其作者，官方不但会认何而且会给予相应的支持，或者像LiveGrid 那样合并到标准库中。
那么，吸引人们兴旺的Ext社区是怎么形成的？这自然有人们青睐Ext框架本身的原因，更能透视出，跟爱好者长期的投入与激情分不开，更难能可贵的是，汇聚这种力量不是什么哗众取巧的“自秀台”而是实际工作中的一丝需求，真正的需要的控件！