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 [e-mail]
 * @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 [e-mail]
 * @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)();
	}

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

评论

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  

赞一个。楼主分析得不错