`
clue
  • 浏览: 30663 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

    博客分类:
  • web
阅读更多
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下了 
分享到:
评论
14 楼 northc 2012-04-19  
楼主  在这里想跟你请教下  Buffered Grid  .  我这里的store的data只能渲染完界面后来通过loadData(somedata)的方式来填充数据     对于Buffered Grid就不起作用了   想请教下有没有什么好的解决办法
13 楼 clue 2011-05-13  
taoge2121 写道
ExtJs的源码看着太费劲了,不如jQ的源码好读!

事情都有两面性,功能强大的自然实现更复杂,上手难度也大
也许以前就有人说,jQ的源码看着太费劲了,不如prototype的源码好读
12 楼 atian25 2011-05-13  
习惯就好吧.
11 楼 taoge2121 2011-05-13  
ExtJs的源码看着太费劲了,不如jQ的源码好读!
10 楼 atian25 2011-05-12  
jlcon 写道
4.0JS体积比原来大了将近一倍,客户端加载更慢了,大家怎么看这个问题?


在4.x里面,你可以轻易的定制你要的类库.
9 楼 clue 2011-05-11  
atomom 写道
强烈建议要支持Bufferview
treegrid的性能完全不行.

为什么不能参造GXT来实现呢.GXT2.0早就实现了bufferview的treegrid了.

这个去官网提比较好,我也提了建议,不过目前没有任何回应

之前研究Ext4.0是为了预研,看看在3.X的项目中能否引入4.0的组件(官方有提供sandbox的示例)
目前个人结论是可行性不高,所以还是转回3.X,尝试借鉴4.0的组件实现开发3.X风格的扩展。

附:
在我们3.X的已有项目中引入4.0可行性不高的原因如下
1. 对3.X做的扩展非常多,引入4.0无法做到平滑嵌入(只扩展了3.X,4.0还是原生的)
2. 两个Ext,就有两套Element机制,会有很多问题(例如对于Ext4创建的组件,使用外部的3.X进行事件释放应该会有问题,因为Ext在注册Dom事件时会记下句柄,以便后面释放。但现在Ext4记下了,Ext3中没有记录)

想象一下,在Ext的Panel中放入YUI的组件   玩笑而已,但尽管它们接口几乎没什么改变,但仍是两套东西。
8 楼 atomom 2011-05-11  
强烈建议要支持Bufferview
treegrid的性能完全不行.

为什么不能参造GXT来实现呢.GXT2.0早就实现了bufferview的treegrid了.
7 楼 clue 2011-05-11  
jlcon 写道
4.0JS体积比原来大了将近一倍,客户端加载更慢了,大家怎么看这个问题?

压缩之后还不如一张图片,以目前的带宽条件来说真没什么

再之,Ext是用于RIA开发的,代码多并不意味着性能低,它只影响一下首次加载时间(并且影响也很小,至于iframe就算了)
RIA网页慢更多的是界面太复杂,导致浏览器渲染布局慢
以一个10000行的列表为例吧,纯html显示也快不到哪里去
如果是用JS动态生成的,那性能一般会更慢,当然是指一次性生成的那种
而在Ext中,可以使用BufferView之类的缓存技术,只生成可视区域的html,再根据滚动条变化即时渲染,这性能提升就很大了。
6 楼 jlcon 2011-05-11  
4.0JS体积比原来大了将近一倍,客户端加载更慢了,大家怎么看这个问题?
5 楼 atian25 2011-05-11  
开始4.0吧, 3.x就算了...
4.0是飞跃
4 楼 646158013 2011-05-10  
3.0 刚学了一部分开始用了。然后4.0出来了。头疼。3.X和之前的2.X的其实改动还不是很大。可是4.0就有些在结构上的变化。还在比较两者去区别。。目前还是坚持用3.0 。4.0还没有用。。
3 楼 clue 2011-05-10  
kyfxbl 写道
那项目从3平滑迁移到4基本就是不可能了啊

可以这样认为,几乎算是全部重写了

用到Ext的项目或多或少都对它做过扩展,或依赖内部结构写了实现
4.0中可能一些大的配置(例如items, layout)还是保留原样,但其它大大小小的改动数不胜数

例如现在store没有recordType了,因为不再使用Record,而是Model
2 楼 kyfxbl 2011-05-10  
那项目从3平滑迁移到4基本就是不可能了啊
1 楼 atian25 2011-05-09  
+U.
最近也在读data和grid这2个包的源码

相关推荐

    GUI面板MATLAB直车道线检测.zip

    GUI面板MATLAB直车道线检测

    (2024年更新)八批中国自由贸易试验区明细数据.xlsx

    截至2024年12月,我国已有八批22个自由贸易试验区,73个片区,本次分享的数据包括自贸区名单、自贸区明细、以及自贸区DID的3份数据 一、数据介绍 数据名称:中国自由贸易试验区明细数据 数据范围:八批自由贸易试验区 数据年份:2009-2024年 数据样本:496条 数据来源:政府公开网站 数据整理:内含开放名单、开放网址明细、以及DID数据

    【工程项目】MATLAB车辆检测(速度+平均速度+GUI+车流量+详细注释).zip

    【工程项目】MATLAB车辆检测(速度+平均速度+GUI+车流量+详细注释)

    2023年全国计算机二级C语言程序改错题.pdf

    2023年全国计算机二级C语言程序改错题.pdf

    基于SpringBoot+Vue的MOBA类游戏攻略分享平台(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    基于SSM+JSP的社区疫情防控管理信息系统+数据库(Java毕业设计,包括源码,教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:jsp 后台框架:SSM 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4

    2023年卫生招聘考试之卫生招聘(计算机信息管理)自测模拟预测题库.pdf

    2023年卫生招聘考试之卫生招聘(计算机信息管理)自测模拟预测题库.pdf

    mysql-5.7.26-winx64 vagrant-2.4.3-windows-amd64 seata-server-2.0.0 nacos-server-2.5.0 VirtualBox-6.1

    mysql-5.7.26-winx64 vagrant-2.4.3-windows-amd64 seata-server-2.0.0 nacos-server-2.5.0 VirtualBox-6.1

    2025年中国企业人才激励现状及发展趋势研究报告

    内容概要:本文是南京蓝腾管理咨询有限公司发布的《2025年中国人才激励白皮书》,聚焦在中国企业管理中人才激励的问题,并结合中国的国情与文化背景,通过对全国18个行业、25个省份、超过千名员工的广泛调查,提出了具有中国特色的管理与激励模式的新思考和解决方案。主要内容涵盖了企业激励措施的现状分析、核心结论、发展趋势预测等方面,其中包括物质和非物质激励、不同层次与年龄的员工激励差异及其对未来企业发展的影响。 适合人群:企业管理层,HR从业者以及对公司管理与文化建设感兴趣的读者。 使用场景及目标:帮助企业管理人员更好地理解不同群体(性别、职位、地域等)员工的具体激励需求,识别并克服现有激励机制中的短板,进而提升整体绩效、增强员工满意度和忠诚度;同时也为企业未来的管理与激励策略制定提供了前瞻性指导。 其他说明:此文档分为免费版和全面版两部分,文中还列举了一些具体的激励实例(如跳海酒馆、西贝等企业的人才激励实践),以及未来研究方向和发展趋势预测等内容。

    Java毕业设计-SpringBoot+Vue的考研资讯平台(附源码,数据库).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    springboot校园在线拍卖系统.zip

    ava项目springboot基于springboot的课程设计,包含源码+数据库+毕业论文

    基于JAVA的机场航班起降与协调管理系统&毕业设计&毕业论文&数据库&演示视频&源代码

    本次项目是设计一个基于JAVA的机场航班起降与协调管理系统。 (1)在经济可行性上来分析的话,该软件是机场内部使用的一个指挥协调软件,属于航空安全投资,本软件开发成本并不高,软件和服务器数据库可以用机场原有的数据库进行开发,比起空难给航空公司造成的损失来说九牛一毛。 (2)在技术可行性上来分析的话,该软件主要运用了Java技术、jQuery-easyui和Mysql数据库技术。Java是到目前来说最稳定的、最可靠的软件开发工具;jQuery-easyui虽然是比较新的前台开发技术,但是他的界面新颖整洁,适合于功能性软件的开发;Mysql数据库也是许多大公司都采用的软件项目开发数据库,不仅稳定而且性能可靠,可以用作本次软件的开发。 (3)在法律可行性上来分析的话,该软件使用的技术都为开源的软件开发工具和语言,虽然Java等开发技术都存在Sun公司的版权问题,但是Java技术是可以免费使用的,没有涉及到法律上的侵权。 (4)在方案可行性上来分析的话,此次软件开发的很大一部分精力都放在了软件的需求分析和设计方面,设计出来的软件可以很好地去实现我们所要完成的软件预先设计的功能。

    GUI面板MATLAB的人脸+指纹融合系统.zip

    GUI面板MATLAB的人脸+指纹融合系统

    2023年全国计算机二级MSoffice高级应用模拟试题资料.pdf

    2023年全国计算机二级MSoffice高级应用模拟试题资料.pdf

    航空航天领域翼型振动与颤振分析的MATLAB仿真程序实现及应用

    内容概要:本文档详细记录了一段用于进行航空器机翼加装挂载(如导弹或其他装备)后的结构动力响应分析,特别是对颤振现象研究的 MATLAB 代码片段。主要内容涵盖初始化几何参数、物性参数以及质量特性等基本信息设定,通过定义多个矩阵(弯曲模式、扭转模式)用以描述系统运动方程的形式表达;采用Theodorsen函数表征气动力特性对于系统稳定性的影响;最终利用模态分析确定临界速度并给出最小颤振速率发生位置的相关讨论与实验数据对比验证。 适合人群:航空航天专业研究人员,工程物理学者及高等院校飞行器设计方向研究生及以上水平的技术爱好者。 使用场景及目标:①理解机翼与附加载体之间的动态交互机制;②掌握利用数学工具进行复杂机械系统的稳定性判断方法;③为实际产品研发提供理论依据和技术支持。 其他说明:文档中的部分内容已被省略以保护原创版权,同时确保敏感算法细节不在未经授权的情况下传播。由于文中涉及到大量的矩阵运算以及高级工程力学概念,请在使用前确认自己拥有足够的前置知识。

    个人用途,用于学习和交流

    个人用途,用于学习和交流

    2023年数模实验报告计算机.pdf

    2023年数模实验报告计算机.pdf

    Java毕业设计-SpringBoot+Vue的基于协同过滤算法商品推荐系统(附源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

    数据中心机房(IDC) 等保2.0建设托管方案

    数据中心机房(IDC) 等保2.0建设托管方案

    基于SpringBoot+Vue的农机电招平台(Java毕业设计,包括源码、数据库、教程).zip

    Java 项目, Java 毕业设计,Java 课程设计,基于 SpringBoot 开发的,含有代码注释,新手也可看懂。毕业设计、期末大作业、课程设计、高分必看,下载下来,简单部署,就可以使用。 包含:项目源码、数据库脚本、软件工具等,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行! 1. 技术组成 前端:html、javascript、Vue 后台框架:SpringBoot 开发环境:idea 数据库:MySql(建议用 5.7 版本,8.0 有时候会有坑) 数据库工具:navicat 部署环境:Tomcat(建议用 7.x 或者 8.x 版本), maven 2. 部署 如果部署有疑问的话,可以找我咨询 Java工具包下载地址: https://pan.quark.cn/s/eb24351ebac4 后台路径地址:localhost:8080/项目名称/admin/dist/index.html 前台路径地址:localhost:8080/项目名称/front/index.html (无前台不需要输入)

Global site tag (gtag.js) - Google Analytics