<span style="font-family: Tahoma, 'Microsoft Yahei', Simsun; background-color: rgb(255, 255, 255);">一、 ExtJS5 自定义类</span>
ExtJS5 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类。由于作者本人是学java的,Java在学习过程中,自定义类喜欢用“Person”,因此本文也用Person作为例子吧。具体代码如下:
<script type="text/javascript">
Ext.onReady(function(){
//Ext.define自定义类的使用
Ext.define('Person',{
name:'',
age:0,
constructor: function(name,age){
this.name = name;
this.age = age;
},
Say:function(msg){
Ext.Msg.alert(this.name + " Says:", msg);
}
});
var lzqm = new Person("六指琴魔",108);
lzqm.Say("我今年108岁了");
});
</script>
在这段代码中,我们使用了Ext.define方法自定义一个Person类,它同样具有Name 和 Age 属性,具有Say 方法,constructor 则的它的构造函数,有了专用的构造函数,我们就省去了写init方法的代码,直接在构造函数中完成对类的初始化。运行结果如下:
ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Teacher类,它继承自Person,同时还拥有Sing方法,代码如下:
//定义一个老师类继承Person类
Ext.define('Teacher', {
extend: 'Person',
constructor: function(name, isGeek) {
this.isGeek = isGeek;
// Apply a method from the parent class' prototype
this.callParent([name]);
},
Sing: function(language) {
this.Say(language);
return this;
}
});
var jacky = new Teacher("Jacky", true);
jacky.Sing("喜欢唱英文歌");
运行结果如下:
如果我们的类中有几十个属性,那么我们使用构造函数就要传入几十个参数来对它完成初始化,这是一件很恐怖的事情。还好ExtJS 为我们提供了这种便利,我们可以在定义类的时候为它添加配置项,然后调用ExtJS 内置的方法完成初始化,并可以生成访问器。
修改一下上面的Person类,代码如下:
Ext.define("Person", {
config: {
Name:'',
Age:0
},
Say: function (name,msg) {
Ext.Msg.alert(name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
我们在Person类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initConfig方法完成对config的初始化。看一下用法:
var Tom = Ext.create("Person", {
Name: '六指琴魔',
Age: 26
});
Tom.Say(Tom.getName(),"我今年"+Tom.getAge()+"岁了");
运行结果如下: