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");