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 方法,运行结果如下:

Extjs-4.2.1(二)——使用Ext.define自定义类

在上面的类中,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-4.2.1(二)——使用Ext.define自定义类

三、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-4.2.1(二)——使用Ext.define自定义类

四、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-4.2.1(二)——使用Ext.define自定义类

试想一下,如果我们的类中有几十个属性,那么我们使用构造函数就要传入几十个参数来对它完成初始化,这是一件很恐怖的事情。还好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-4.2.1(二)——使用Ext.define自定义类

五、ExtJS 中类的别名 - alias

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

Extjs-4.2.1(二)——使用Ext.define自定义类

红色方框圈出的部分是这个类的别名,它对应类的全称是 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-4.2.1(二)——使用Ext.define自定义类

六、ExtJS 中的动态加载

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

Extjs-4.2.1(二)——使用Ext.define自定义类

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

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

Extjs-4.2.1(二)——使用Ext.define自定义类

下面是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文件,运行结果:

Extjs-4.2.1(二)——使用Ext.define自定义类

另外,我们还可以手动的加载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"); })

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

Extjs-4.2.1(二)——使用Ext.define自定义类

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

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

上一篇:Android Studio将项目打包成apk


下一篇:Android Studio下多渠道打包