`
andy_ghg
  • 浏览: 293349 次
  • 性别: Icon_minigender_1
  • 来自: 扬州
社区版块
存档分类
最新评论

ExtJS 4.0 的改变(仅发表我发现的)

阅读更多
最近写了一个较为完整版(有部分细节没说)的,去看看这里吧http://andy-ghg.iteye.com/admin/blogs/1133456

很久没有写ExtJS了,之前在忙一个BI项目,没有用到ExtJS,于是几乎将其淡忘了,上个礼拜天偶然发现已经更新4.0正式版了,于是拿起来玩玩,结果发现了很多不适应,但是ExtJS基本上是在往一个好的方向在走。

很久以前我写过一个文章,详细查看白度文库:
http://wenku.baidu.com/view/ce8d3e08763231126edb1146.html
这篇文章是09年8月份基于ExtJS 2.0写的(里面的例子是刚出3.x的时候做的),里面的思想以及开发方式直到官方的可视化工具出现之后才得到印证,官方可视化工具生成的代码与我组织的代码格式几乎一模一样。以前一直以为这个文档可以用很久,没想到这次ExtJS4.0带来的彻底改革,把我整懵了。

好了,废话不多说,先来看看这次在ExtJS 4.0中改变。

在4.0中,官方几乎彻底的重构了一遍,里面的改变非常多,我至今也无法完全指明究竟有哪些改变。下面就列出当前我遇到的一些改变:

改变1:创建对象的时候不再使用new(赞一个)
这个改变可能是最让人蛋疼,也是最让人欢欣鼓舞的了,通过其封装好的方法,你可以创建出效率更高的程序。现在使用Ext.create("")这个方法来创建对象,里面是字符串。所以可能更加灵活的创建对象(回想以前用eval("new AA.bb.cc()"),很痛苦啊)。

改变2:动态加载JS文件(鄙视一个)
这个老生常谈的问题似乎被ExtJS官方在4.0中解决了,但是就我目前使用的状态来看,我只能说一般般,还有不少问题(相当多的问题),第一个问题就是,如果你要想创建一个完全由ExtJS构建的程序,你需要从服务器请求N次把所有需要的底层JS下载下来,然后在操作过程中再依据情况请求JS文件,需要消耗大量的时间,也许有人说,ExtJS对本地做了缓存,仅仅第一次稍微有点慢而已,这方面我确实不太清楚是否做了缓存,至少在Chrome浏览器、Tomcat服务器、CAS控制SSO这样的架构下,局域网访问服务器,我刷新一次要等好几分钟。我怀疑可能是CAS那块可能对每一个请求做了判定,在每一个请求后面加上了参数的原因。
第二个问题就是,动态加载JS在很多情况下会报奇奇怪怪的错误,这个现象出现最多的就是ExtJS所谓MVC,在完全按照他的例子搭建的MVC自己做的例子中,一模一样的代码会莫名其妙的无法加载JS文件,既两个Controller两个Store两个Model完全类似(除了类名不一样),结果就是一个能隐式的加载JS,而另外一个则必须显式的加载,查到官方的论坛,上面也有人问,得到的回答就是:在每一个Store上面显式的加上Ext.require()函数来解决这个问题,我现在只能怀疑是ExtJS还没有解决好这个问题,至少不适合在正式的项目里使用这个所谓的MVC(其实在J2ee中,没必要非要在JS这一层做MVC,主要就是调试成本太大)。

但是,如果只是想把ExtJS当作JQuery来用,这个就非常有用了。还是非常期待它的下一个版本的。
改变3:extend的写法变了(赞一个)
在4.0之前,我们写一个继承自Panel的一个自定义组件的时候是这么写的:
Ext.ns("MyComp.VideoPanel");

/**
 * @author Ge.BugMan@gmail.com
 * @since ExtJS 3.x or ExtJS 2.x
 * @memberOf {TypeName} 
 */
MyComp.VieoPanel = Ext.extend(Ext.Panel,{
	initComponent : function(){
		MyComp.VieoPanel.superclass.initComponent.call(this,arguments);
	}
})

Ext.reg('videopanel',MyComp.VieoPanel);

即使你继承一万次,你也必须这么写,除非你修改他的源码,让这种写法轻松一点。
在4.0中,就没有这么蛋疼了,在ExtJS 4.0中很方便:
/**
 * @author Ge.BugMan@gmail.com
 * @since ExtJS 4.x
 * @memberOf {TypeName} 
 */
Ext.define("User.view.modal.ModalMgr", {
	extend : "Ext.panel.Panel",
	//类似Ext.reg的功能
	alias : "widget.modalMgr",
	initComponent : function() {
		this.callParent(arguments);//我最喜欢这个了,比以前少写多少东西?
	}
});

你再也不用看到那些蛋疼的namespace、Ext.reg了。也许你感官上会觉得两者代码量差不多,但是这样写起来是不是更加的整齐呢?

改变4:store变了
store变成什么样子了?第一,store.load这个方法的baseParams不见了,转而由proxy的extraParams属性替代。以前可能这么写过:

store.load({
    baseParams:{a:a,b:b}
})

而现在得这么写:

this.store.proxy.extraParams= {limit:5,cid:cid}
this.store.load();


还有人发现,原来store的reload函数没有了,咋回事儿捏?其实我们回头想想,在设计的时候,真的有必要有一个reload函数吗?我就调用一次load,就加载一次,再调用再加载就是了。这次4.0去掉了这个函数。

改变5:更强的除错能力
ExtJS在所有的debug版本的js中都加入了类似console.log的功能,而且错误提示更加的到位了,而不是像以前仅仅事弄出一堆代码了。错误提示不仅仅告诉你在哪里错了,还告诉你可能的解决方案。

改变6:效率!效率!
如果有人非要拿来跟jQuery比的话,我没意见,本身就是两种不同的发展方向,我现在项目里两个框架都在用。4.0这次带给我们的效率依然是不断进步的感觉(不知到是不是我电脑配置越来越高了造成的⋯⋯有待分析),跟2.0比起来,4.0的运行效率已经上升了很大,但是加载效率也慢慢的下滑,所以官方推了个动态加载JS,不过我感觉几百kb的js文件,对于现在的网速来说将越来越不是问题。(我老家就在改造光纤入小区,下载速度将达到2MB/s,是江苏的一个普通三线城市)。甭管是不是真的权当希望。

改变7:加强了DomQuery
现在只要一个现实对象通过up、down这两个函数即可找到它附近的组件,例如form里的button,通过button.up("form")就能找到这个按钮所在的form组件,回想以前写getParentCmp和owner的日子是多么的混乱。

改变8:改变了Function的createDelegate函数

现在这个函数使用Ext.bind()来完成,例如以往的代码如下:
getFoo : function(){
		return this.foo || (function(){return new foo()}.createDleegate(this))();
	},

现在这么写:
	createUserGridPanel : function(){
		return this.userGrid || Ext.bind(function(){
			//编写你的代码
		},this)();
	}

以上只是我个人最近两天感觉到的改变,当然,这次改变远远不只这些,还需要我们去慢慢发掘。




7
1
分享到:
评论
9 楼 wanglujiede 2014-08-26  
幸亏看了这里,关于store的proxy的params问题顶一个了
8 楼 andy_ghg 2013-09-29  
niuyantao 写道
楼主这句话我不是太理解:4.0的运行效率已经上升了很大,但是加载效率也慢慢的下滑,能解释下不??

加载效率是指js文件以及css越来越大,导致加载效率比较低(国内网络环境),不过如果你使用的是标准开发流程,例如Sencha CMD(或叫Sencha SDK Tools)来创建、压缩的话,这个问题就不存在。
7 楼 niuyantao 2013-09-27  
楼主这句话我不是太理解:4.0的运行效率已经上升了很大,但是加载效率也慢慢的下滑,能解释下不??
6 楼 andy_ghg 2011-07-20  
taoge2121 写道
楼主以前的哪个教程我全看了,很不错!很牛逼!
不知道你能写一个4.0版本的吗?

本来是有这个打算的,但是最近在开发项目,正好也在用4.0,所以想再使用一段时间后总结一下。
5 楼 taoge2121 2011-07-20  
楼主以前的哪个教程我全看了,很不错!很牛逼!
不知道你能写一个4.0版本的吗?
4 楼 michael88wen 2011-06-26  
期待更多EXT4.0佳作
3 楼 xiaofancn 2011-06-10  
赞一个,
2 楼 senhui19 2011-06-02  
proxy.extraParams
就是这个参数让我纠结了很久啊,查了N久的API都没有查出来,下次有空得多看看源码才行啊,谢谢LZ的分析,期待LZ的更多好作品
1 楼 147175882 2011-06-02  
赞一个。楼主分析得不错

相关推荐

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    ExtJs4.0 手册中文版

    在《ExtJs4.0 手册中文版》中,你可以找到关于ExtJS 4.0的全面介绍和详细指南。这个手册涵盖了框架的基础知识,如MVC架构、组件系统、数据绑定以及事件处理机制。此外,它还深入讲解了如何使用各种组件,如GridPanel...

    extJs4.0 开发手册源码

    这个"EXTJS4.0开发手册源码"包含了EXTJS4.0框架的源代码,以及与其配套的开发指南,是深入理解EXTJS4.0内部机制和进行实际项目开发的重要参考资料。 EXTJS4.0的核心特性包括组件化开发、数据绑定、可扩展性、丰富的...

    ExtJs4.0官方版本

    ExtJS 4.0是Sencha公司开发的一款强大的JavaScript前端框架,主要用于构建富客户端Web应用程序。这个官方版本的发布标志着ExtJS在功能、性能和可维护性方面的一个重要里程碑。以下将详细介绍ExtJS 4.0中的核心概念、...

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    EXTJS4.0视频教程配套代码

    [02]EXTJS4.0的新特性.003.zip (14.41M)[02]EXTJS4.0的新特性.002.zip (50.00M)[02]EXTJS4.0的新特性.001.zip 第三讲:extjs4.0数据模型--Model(附件较大做了分包压缩大家只要下载2个包运行001就ok了) [03]EXTJS...

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...

    EXTjs4.0学习文档

    EXTJS 4.0 学习文档 EXTJS 4.0 是一个面向开发 RIA 的 AJAX 应用,是一个用 JavaScript 写的,主要用于创建前端用户界面,是一个与后台技术无关的前端 AJAX 框架。它能够帮助我们在页面上快速而简单构建各种各样的...

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    extjs4.0技术

    ### Extjs4.0 技术详解 #### 一、Extjs4.0 概述与获取 **Extjs4.0** 是一款强大的企业级前端框架,它可以帮助开发者快速构建复杂的用户界面,并且提供了丰富的组件和功能。对于初学者来说,理解其核心概念和基础...

    Extjs4.0基础学习指南

    一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载

    Extjs 4.0发布啦

    最新Extjs4.0 所有文件,含案例,帮助文档,源代码

    extjs 4.0 日期时间控件

    ExtJS 4.0 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一系列强大的组件,包括日期和时间选择器,使得用户界面更加友好和交互。在标题中提到的"extjs 4.0 日期时间控件",是指ExtJS 4.0框架...

    EXTJS4.0视频教程配套代码包含action类

    EXTJS4.0是一款强大的JavaScript框架,用于构建富客户端Web应用程序。这个视频教程配套代码主要涉及EXTJS4.0中的action类,这是EXTJS中处理服务器端交互的关键部分。在EXTJS中,action类通常指的是Ext.Ajax或Ext....

    extjs 4.0 extjs

    标题提到的是ExtJS的4.0版本,这是一个重要的里程碑,因为它引入了许多新功能和改进,与之前的2.0和3.0版本有显著区别。 在ExtJS 4.0中,最显著的变化之一是其模型-视图-控制器(MVC)架构的增强。这个版本提供了更...

    ExtJS 4.0 的改变

    【ExtJS 4.0 的改变】 ExtJS 4.0 是一个重要的更新,它引入了许多新特性,改进了框架的性能和可维护性。以下是其中的一些关键改变: 1. **兼容性**: - ExtJS 4.0 提供了一个向后兼容的解决方案,使得开发者能够...

    Extjs4.0开发包

    这个“Extjs4.0开发包”包含了开发人员需要的所有资源,包括库文件、示例和API文档,以便于理解和使用ExtJS 4.0。 首先,让我们深入了解ExtJS的核心概念。ExtJS基于MVC(Model-View-Controller)架构模式,这是一种...

    Extjs4.0中文学习手册、入门详解

    ExtJS 4.0中文学习手册、入门详解 本文为 ExtJS 4.0 的中文学习手册,旨在为初学者提供一个详细的入门指南。本手册涵盖了 ExtJS 4.0 的基础知识、环境搭建、基本使用方法等方面的内容。 1. ExtJS 4.0 的基础知识 ...

Global site tag (gtag.js) - Google Analytics