日期:2014-05-16  浏览次数:20345 次

ExtJS 4.0 的改变--较为完整的介绍。
惯例,看之前先看看我的很久很久以前的学习笔记(就是那个Word文档,没兴趣的可以不看,不影响):
http://wenku.baidu.com/view/ce8d3e08763231126edb1146.html

本文里面不会详细介绍某些方法函数具体如何使用,例子全部自己写的(部分参考API和ExtJS 4.0 Developer Preview),应该不会有错,提到的方法函数只提供名字,自己去API看(在此严重鄙视一些照搬API就出本书捞钱的人)

基础上的变化:

兼容性
ExtJS4最终会提供一个兼容ExtJS 3的解决方案。

沙箱模式
可是使用alias来为组件添加别名,类似以前的Ext.reg,不过alias会用不同的类别区分开来,例如,widget.xxxxx和feature.xxxxx是不一样的,虽然它们都是用alias来定义的,但是类别完全不同。

包和命名空间的改变
现在的ExtJS不再使用混乱的分包机制(其实以前的感觉更加直白),例如以前的Window,包名是Ext.Window,但是现在则是Ext.window.Window,Ext.window包下还包括了Ext.window.MessageBox等。SplitButton则是Ext.button.Split。

创建新的对象
现在ExtJS使用Ext.define函数来创建组件类,该函数还能实现自动加载JS类(uses属性,需设置Ext.Loader为开启详见下文,看不懂看API),它会自动的完成以前的ns(namespace)功能。例如下面
Ext.ns("Foo.bar");

Foo.bar = Ext.extend(Ext.util.Observable,{
        //your code here
});
Ext.reg("foobar",Foo.bar);

所以现在创建一个组件应该是这样的:
Ext.define("Foo.bar",{
        extend : "xxxxxx",
        alias : "widget.foobar"
        //your code here
});


现在ExtJS不再使用new关键字(当然你想用也没关系),而是推荐使用Ext.create函数来解决这个问题,例如以往我们创建一个组件的代码是
var win = new Ext.Window({
        //some options
});

而现在则是
var win = Ext.create("Ext.window.Window",{
        //some options
});


新的类加载方法--Class Loading
现在ExtJS可以动态加载JS文件(类)了,新的Ext.Loader类和一些其它的方法可以完成分别加载所需的JS文件,例如Ext.Loader里的setPath、require等方法函数可以做到动态加载。
如果要使用这个功能,你首先得启用它:
Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'My': 'my_own_path'
      }
});

path的意思是,当前引用这个JS的HTML文件同级的my_own_path目录被命名为My,所以以后该目录下的所有类名为My.xxxx的类都能被动态加载。
例如以下文件目录:

在定义的时候就是:
Ext.Loader.setConfig({
      enabled: true,
      paths: {
          'NS': 'app'
      }
});

app/person文件夹中的类名为LKPerson的定义代码为:
Ext.define("NS.person.LKPerson", {
	extend : "Ext.panel.Panel",
        alias : "widget.lkperson",//当然,这个属性不是必须的
	border : false,
        initComponent : function(){
                this.callParent(arguments);//这个arguments你懂,不懂Google
        }
})

注意一点的就是,NS.person.LKPerson中的LKPerson就是文件名称(换句话说文件名必须是LKPerson且必须在person目录下)

好了,下面看看动态加载的两种方式:
require的用法如下:
Ext.require("Foo.bar");

Ext.define("AA.bb.CC",{
        //some options
});


require的意思是:在这个类(AA.bb.CC)被加载之前必须要加载Foo.bar并且被实例化(虽然好用但是劝各位不要滥用)。

uses的用法如下:
Ext.define("AA.bb.CC",{
        uses:["Foo.bar"]
});


uses的意思是:在这个类(AA.bb.CC)在运行过程中要用到Foo.bar这个类,用到的时候再加载。

其它的就不多解释,具体看API(这句话我最后说一遍

混入类
将一个类混入到另外一个类中,创建的时候一同创建:
Ext.define("Dog",{
	sayHello : function(){
		alert("AAAA")
	}
})

Ext.define("Animal",{
	mixins:{
		dog:"Dog"
	}
});


Ext.onReady(function(){
	var an = Ext.create("Animal");
	an.mixins.dog.sayHello();
})


静态方法
现在所有的类(是所有的ExtJS类,Ext.define定义的)都提供静态方法,可以很方便的定义:
Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new this(brand);
         }
     },

     constructor: function() { ... }
});

var dellComputer = Computer.factory('De