XTJS4新特性之崭新的类系统及动态加载

在这片文章中，我们主要看一下EXTJS4中对类的一些方面的改进，比如说类的定义等等。以及在这些改进中，比起之前版本的一些使用上的好处。或者说改进了之前的一些缺陷。首先我们来认识一下，EXTJS4中在类的使用上做了什么改进。

?

（一）全新的类系统

?

1、EXTJS4中所有的类都可以使用字符串引用。例如我们来看一下，EXTJS3.X中和EXTJS4中定义的区别。

?

//Extjs3.x中定义类的方法

?

myApp.myClass=Ext.extend(Ext.Window,{

?

???initComponent:function(){

?

???????//code;

???????myApp.myClass.superclass.initComponent.apply(this,arguments);

???}

?

});

?

在上述的代码中，我们可以看到，这是我们在使用Extjs3.x中最常用的定义类的方法。在正常使用的情况下，这样的定义方式，是没有什么问题的。但是，在特殊的情况下，这样的定义方式，还存在一定的缺陷。比如说，我们myApp的包名没有定义。这个时候，我们在使用时就会出现错误，比如说，我们的Ext.Window类还没有导入到系统中，这样也会出现错误，这样就会导致我们的类创建不成功。当时，在我们Extjs4中，全新的定义类的方式，都可以避免上边的一些错误，下边我们来看一下EXTJS4中的类的定义方式:

?

//EXTJS4中定义类的方式

?

Ext.define("myApp.myClass",{

?

???extend:"Ext.Window",

?

???initComponent:function(){

?

??????//code;

??????myApp.myClass.superclass.initComponent.apply(this,arguments);

????}

?

});

?

Extjs4中所有的类的引用都可以用字符串。这样，当我们在引用一个类时，EXTJS首先根据字符串去匹配相应的类，匹配到相应的类后，再去执行下一步操作。这样就会避免，因为导入顺序或者未定义包名。而出现的错误问题。

?

2、在EXTJS4中，为了使类的扩展更为灵活，在4中还增加了mixins（混入）的功能。比如说，我们类（People），（CanWriteJava），（CanWriteC#）,(CanWriteC++)。我们有一个学生类（Student）继承自（People），该学生同时会使用java、.net、c++等语言。这个时候，我们就需要使用到mixins（混入）的特性。代码如下:

?

//People类的定义

?

Ext.define("People",{});

?

//CanWriteJava类的定义

?

Ext.define("CanWriteJava",{

?

???codeJava:function(){

?

??????//code;

?

???}

?

});

?

//CanWriteC#类的定义

?

Ext.define("CanWriteC#",{

?

???codeC#:function(){

?

??????//code;

?

???}

?

});

?

//CanWriteC++类的定义

?

Ext.define("CanWriteC++",{

?

???codeC++:function(){

?

??????//code;

?

???}

?

});

?

//Student类的定义

?

Ext.define("Student",{

?

???extend:"People",

?

???mixins:{

?

?????java:"CanWriteJava",

?

?????net:"CanWriteC#",

?

?????c:"CanWriteC++"

?

???}

?

});

?

经过上述的定义，Student中就可以使用（CanWriteJava、CanWriteC#、CanWriteC++）中的特性了。例如：

?

var student=new Student（）；student.codeJava();

?

3、在Extjs4中，当我们定义类中的属性时。Extjs会自动为我们创建其属性的getter和setter方法。而不用我们手动编写getter和setter方法。代码如下：

?

Ext.define("myClass",{

?

???config:{

?

??????name:"",

??????address:"",

??????telephone:""

???}

?

});

?

var cls=new myClass();

cls.setName("zhangsan");//extjs自动创建的setName方法

cls.getName();//extjs自动创建的getName方法

?

?

?

（二）动态加载

?

EXTJS4中为我们增加了另一个新的特性就是动态加载，我们可以使用动态加载，在我们需要时，才导入，这样大大节省了很多资源。比如说，我们想使用Window这个类，但是。我们又不确保，这个类当前是否已经引用到该系统中，我们就可以使用如下写法:

?

Ext.require("Ext.Window",function(){

?

???//导入成功后，执行该方法体

?

});

?

如果，我们想导入我们自己定义的类，动态引用自己编写的js文件，我们需要经过如下步骤:

?

1、

?//开启动态加载阀值
????????Ext.Loader.setConfig({

????????????enabled: true

????????});

?

2、

//设置动态加载js的路径

????????Ext.Loader.setPath("test", "JS/test");

?

3、

?//导入类文件
????????Ext.require(["test.window.mywindow","test.login.mylogin"]);

?

4、

//使用导入的类文件

????????new test.window.mywindow().show();

?

以下是工程中的文件目录图：

?

?

红色区域为自定义的js目录结构，注意与第三个步骤的名称想匹配。

?

以上就是extjs4中的类系统和动态加载的特性。有什么不妥之处，还请大家多多交流。