Extjs 学习总结-Ext.define自定义类

本教程整理了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());

参考链接:http://www.qeefee.com/extjs-course-3-define-classes

上一篇:GitHub标星8k!苦逼程序猿拿头发换生活


下一篇:8年软件测试大牛心路历程,你还在迷茫吗?8k~15k+的转变!