Extjs-4.2.1（二）——使用Ext.define自定义类

鸣谢：http://www.cnblogs.com/youring2/archive/2013/08/22/3274135.html

--------------------------------------------------------------------------

本篇博客主要介绍了Etxjs如何自定义类的，以及Extjs的继承、属性的封装，这类似于java语言的继承、封装的特点。此外，在java语言中，分层是重要的思想，如类的定义与创建其实例并调用方法一般都是分别写在不同的java文件中，javascript语言由于没有类的概念，因此总是所有的代码写在一个js文件中，而Extjs则不同，它与java语言一样具有面向对象的特性，在本博客中所介绍的Extjs的动态加载描述了Extjs是如何将类的定义与创建类的实例及调用方法进行分层的。

一、什么是define？

define是Extjs的一个方法，用于定义一个类或覆盖。详情见API：http://extjs-doc-cn.github.io/ext4api/#!/api/Ext

二、ExtJS 中自定义类

在ExtJS中，定义一个Person类：

Ext.onReady(function(){
Ext.define('Person',{
name:'wang',
say:function(){
alert('hi,'+this.name);
}

})
var obj = new Person();
obj.say();
})

在这段代码中，我们使用了Ext.define方法自定义一个Person类，它具有Name，具有Say 方法，运行结果如下：



在上面的类中，name属性被赋了一个指定的值，显然，除了静态属性，在类中的属性仅需被声明，在创建实例时进行赋值，这就需要构造函数了。看下面的代码：

Ext.onReady(function(){
Ext.define("Person2", {
//定义、初始化成员属性
Name: '',
Age: 0,
//定义成员方法
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
//定义构造函数
constructor: function (name, age) {
this.Name = name;
this.Age = age;
}

});
var Tom = new Person2("Tom", 26);
Tom.Say("Hello");
})

运行结果：

三、ExtJS 中类的继承

ExtJS 允许对现有的类进行扩展，其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person2类进行继承，定义一个Developer类，它继承自Person2，同时还拥有Coding方法，代码如下：

/**
* 此js演示了Etxjs类的继承
*/
Ext.onReady(function(){

//基类
Ext.define("Developer", {
extend: 'Person2',//继承
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码..", code);
},
constructor: function(){
this.callParent(arguments);
}
});

var Bill = new Developer("Bill", 26);
Bill.Coding("int num1 = 0; ");
})

从代码中可看出，ExtJS 使用 extend来实现继承。我们为Developer 类添加了Coding 方法，这是我们对Person类进行的扩展。在构造函数中，通过调用this.callParent 方法，实现对属性的初始化。需要说明的是，如果此处只调用了父类的构造方法，则可以省略掉，ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化：

/**
* 此js演示了Etxjs类的继承
*/
Ext.onReady(function(){

//基类
Ext.define("Developer", {
extend: 'Person2',//继承
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码..", code);
}
});

//基类在new实例时如果在其类中没有定义构造方法，则调用其父类的构造方法。
var Bill = new Developer("Bill", 26);
Bill.Coding("int num1 = 0; ");
})

需要注意的是：1.如果你在子类中使用了构造函数，ExtJS 则不会再自动调用父类的构造函数；2.像java导包一样，在html中要导入父类的js文件，代码如下：

<!-- 导入父类 -->
<script type="text/javascript" src="../js/define/define2.js"></script>
<script type="text/javascript" src="../js/define/define3.js"></script>

运行结果：

四、ExtJS 中类的选项 - config

首先看一个例子，我们在ExtJS中定义一个Window对象，代码如下：

var win = Ext.create("Ext.window.Window", {
title: '示例窗口,
width: 300,
height: 200
});
win.show();

在上面的代码中，我们通过Ext.create方法创建了一个Window 对象，Ext.create 方法的第一个参数是类名，第二个参数是类的选项，它是一个JSON格式的对象，用来初始化Window对象。我们的窗口运行如下：



试想一下，如果我们的类中有几十个属性，那么我们使用构造函数就要传入几十个参数来对它完成初始化，这是一件很恐怖的事情。还好ExtJS 为我们提供了这种便利，我们可以在定义类的时候为它添加配置项——config,它是Extjs的属性包装器，为属性提供get和set方法。

我们来修改Person类，使它可以通过config初始化：

/**
* define-config
* 此js演示了在定义的类中将类的成员属性放在config中并且如何实例化对象的。
*/
Ext.onReady(function(){
Ext.define("Person", {
config: {
Name: '',
Age: 0
},
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
Say2: function (msg) {//在方法中，“this.config.属性名”和“this.属性名”的形式都可以调用成员属性。
Ext.Msg.alert(this.config.Name+","+this.Age + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});

//注意：因为在Person类中将成员属性放进了config中，因此已不能用new的方式进行实例化了。
var Jack = new Person('Jack',28);
//    Jack.Say('hi');
//    alert(Jack.getAge());

//使用Ext的create方法创建并返回一个实例
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");
//    alert(Tom.getAge());//26 注：“Tom.config.Age”、“Tom.Age”都可以得到Age的值

//使用Ext自动生成的set、get方法设置、访问实例属性
Tom.setAge(18);//注：“Tom.Age=18”也可以——这是js赋值的方法
//    alert(Tom.getAge());//18 注：“Tom.Age”也可以——这是js取值的方法
})

我们在类的定义中添加了config项，将需要在配置中完成的属性添加在里面，而在构造函数中，我们通过调用this.initConfig方法完成对config的初始化；在定义Person类对象的时候，使用Ext.create方法，传入类名Person以及配置项，运行结果：

五、ExtJS 中类的别名 - alias

在我们查看ExtJS API 的时候，在左侧常会有这样的说明：



红色方框圈出的部分是这个类的别名，它对应类的全称是 Ext.window.Window，由此可以看出别名更加简单，容易记忆和书写。我们在实例化类的时候，可以使用别名来替代类名全称，例如我们之前定义的win对象，他的代码可以修改为：

/**
* define-alias
* 此js演示了利用"alias"给定义的类起别名。
*/
Ext.onReady(function(){
Ext.define("vo.Person", {
config: {
Name: '',
Age: 0
},
alias:"Person",//给定义的类起个别名
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
Say2: function (msg) {//在方法中，“this.config.属性名”和“this.属性名”的形式都可以调用成员属性。
Ext.Msg.alert(this.config.Name+","+this.Age + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});

//使用Ext的create方法创建并返回一个实例
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");

})

六、ExtJS 中的动态加载

在Ext.create 方法的介绍中，有这样一段描述：



它的意思是：如果Ext.loader 可用，且类还没有被定义，它将试图通过同步加载来加载类。

接下来我们来试试类动态加载的功能。我们的类vo.Person 类的位置是：



下面是Person.js的代码：

/**
* define
* 此js定义一个Person类
*/

Ext.define("vo.Person", {
config: {
Name: '',
Age: 0
},
alias:"Person",//给定义的类起个别名
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
Say2: function (msg) {//在方法中，“this.config.属性名”和“this.属性名”的形式都可以调用成员属性。
Ext.Msg.alert(this.config.Name+","+this.Age + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});

下面是在HTML中需要引用的js（define6.js）代码：

/**
* define-alias
* 此js演示了Ext的动态加载
*/
//js获取项目根路径，如：http://localhost:8081/extjsTest1
function getRootPath(){
//获取当前网址，如： http://localhost:8081/extjsTest1/define/define6.jsp var curWwwPath=window.document.location.href;
//获取主机地址之后的目录，如： extjsTest1/define/define6.jsp
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
//获取主机地址，如： http://localhost:8081 var localhostPaht=curWwwPath.substring(0,pos);
//获取带"/"的项目名，如：/extjsTest1
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
}

Ext.onReady(function(){

Ext.Loader.setConfig({
enabled:true,
paths:{
vo: getRootPath()+"/js/vo"//告诉Extjs命名空间“vo”的路径
}
})

/**
* 在Extjs创建vo.Person的实例Tom时发现该类没有被定义，因此它会加载命名空间vo指定路径下的Person.js,
* 这就是Extjs的动态加载。
*/
var Tom = Ext.create("vo.Person", {//注意：使用动态加载，应使用类的全名，如果使用别名Extjs无法找到正确的路径。
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");

})

在完成Loader 的配置以后，我们就可以移除掉对Person.js的引用了，下面是HTML引用文件：

<link rel="stylesheet"  type="text/css" href="../ext-4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">

<script type="text/javascript" src="../ext-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-4.2.1/locale/ext-lang-zh_CN.js"></script>

<script type="text/javascript" src="../js/define/define6.js"></script>

可以看到，上面并没有引用项目中的"../js/Vo/Person.js"这个js文件，运行结果：



另外，我们还可以手动的加载Person.js，代码如下：

/**
* define-alias
* 此js演示了Ext的动态加载
*/

//js获取项目根路径
function getRootPath(){
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var pos=curWwwPath.indexOf(pathName);
var localhostPaht=curWwwPath.substring(0,pos);
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
return(localhostPaht+projectName);
}

Ext.onReady(function(){

Ext.Loader.setConfig({
enabled:true,
paths:{
vo: getRootPath()+"/js/vo"//告诉Extjs命名空间“vo”的路径
}
})

//加载Person.js
Ext.require("vo.Person");

var Tom = Ext.create("Person", {//fail:使用Ext.require方法加载Person.js无法用vo.Person的别名Person创建实例
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");

})

但可惜的是，目前得到的是失败的结果，运行，在谷歌浏览器出现以下错误：



说明Ext.require没有正确加载Person.js

小结：Extjs的动态加载不仅实现了分层设计的思想，而且对于提高系统性能有重要的意义——这类似于hibernate的延迟加载的机理——动态代理。