本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define)、数据模型、代理等。本节介绍使用Ext.define自定义类
使用Ext.define自定义类
1. 首先看看js中自定义类的代码:
var Person = function (name, age) {
this.Name = "";
this.Age = 0;
this.Say = function (msg) {
alert(this.Name + " Says : " + msg);
}
this.init = function (name, age) {
this.Name = name;
this.Age = age;
}
this.init(name, age);
}
在这段代码中,我们定义了Person类,它具有Name 和 Age 两个属性,具有 Say 和 init 公有方法。
创建对象的代码:
var Tom = new Person("Tom", 26);
Tom.Say("Hello");
2. 下面主要介绍ExtJS.define自定义类d的实现。
Ext.define("Person", {
Name: '',
Age: 0,
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (name, age) {
this.Name = name;
this.Age = age;
}
});
用法和上述js创建对象用法一致。
3. ExtJS中类的继承
ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现。代码如下:
Ext.define("Developer", {
extend: 'Person',
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码", code);
},
constructor: function(){
this.callParent(arguments);
}
});
在构造函数中,通过调用this.callParent 方法,实现对属性的初始化。需要说明的是,如果此处只调用了父类的构造方法,则可以省略掉,ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化:
Ext.define("Developer", {
extend: 'Person',
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码", code);
}
});
需要注意的是,如果你在子类中使用了构造函数,ExtJS 则不会再自动调用父类的构造函数。和java不一样哦
4. 创建类的对象(ExtJS 中类的选项 - config)
下面看一般情况下创建对象的方式:
var Bill = new Developer("Bill", 26);
Bill.Coding("int num1 = 0; ");
一般这种情况是使用构造函数来完成传入参数的初始化工作,在传入的参数较多时,就很不方便了。这时Extjs提供了类的选项config。通过config。
我们在类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initConfig方法完成对config的初始化。看一下用法:
Ext.define("Person", {
config: {
Name: '',
Age: 0,
},
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");
除了代码更加清晰简洁以外,ExtJS 还为我们生成了访问器,我们可以通过下面的方式访问Tom的属性:
Tom.setAge(20);
alert(Tom.getAge());