Ext扩展——LiveDataPanel的简介

简介: 在数据量不太大的负荷的情况下,要求Grid显示数白行记录是绰绰有余的,若一子来50千行数据呢?这绝对不是“小儿科”,势必对客户编构成极大的压力,不论是网络通迅还是内存的占用。一般针对该情形,我们用分页就解决了呢。

在数据量不太大的负荷的情况下,要求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:

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

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

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

目录
相关文章
启用 ESLint 后 解决格式化文档自动添加分号和双引号问题
启用 ESLint 后 解决格式化文档自动添加分号和双引号问题
1357 0
启用 ESLint 后 解决格式化文档自动添加分号和双引号问题
|
运维 安全 中间件
云计算万字长文 - 企业上云策略全览与最佳实践(长文)1
云计算万字长文 - 企业上云策略全览与最佳实践(长文)
858 0
|
11月前
|
Ubuntu Linux
Linux发行版众多
Linux发行版众多
286 5
|
10月前
|
机器学习/深度学习 人工智能 搜索推荐
探索人工智能在医疗健康领域的最新进展与未来展望
探索人工智能在医疗健康领域的最新进展与未来展望
572 12
|
9月前
|
机器学习/深度学习 人工智能 搜索推荐
AI技术在医疗领域的应用与前景
本文探讨了人工智能(AI)技术在医疗领域的应用,包括疾病诊断、治疗方案制定、药物研发等方面。通过对现有研究成果的梳理,分析了AI技术在提高医疗服务效率、降低医疗成本、改善患者体验等方面的潜力。同时,也指出了AI技术在医疗领域面临的挑战,如数据隐私保护、伦理道德问题等,并展望了未来的发展趋势。
794 2
|
10月前
|
机器学习/深度学习 编解码 算法
了解与对比主流背景去除工具
本文对比了几款主流的背景去除工具,包括Remove.bg、Removal.ai、RMBG 2.0、Imagga和Wondershare Pixcut,重点介绍了RMBG 2.0这款开源工具的性能、优势及挑战,适用于不同需求的用户选择。
|
10月前
|
API 索引
Elasticsearch实时搜索
【11月更文挑战第2天】
225 1
|
算法 安全 网络安全
网络工程师如何利用IPsec VPN技术实现分公司与总部互联?(手工方式)
网络工程师如何利用IPsec VPN技术实现分公司与总部互联?(手工方式)
525 0
网络工程师如何利用IPsec VPN技术实现分公司与总部互联?(手工方式)
|
缓存 负载均衡 应用服务中间件
【2022】Nginx使用ngx_http_proxy_module模块实现七层反向代理
【2022】Nginx使用ngx_http_proxy_module模块实现七层反向代理
503 0
【2022】Nginx使用ngx_http_proxy_module模块实现七层反向代理

热门文章

最新文章