Extjs 学习总结-Ext.define自定义类
2016-05-16 10:08
567 查看
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define)、数据模型、代理等。本节介绍使用Ext.define自定义类
在这段代码中,我们定义了Person类,它具有Name 和 Age 两个属性,具有 Say 和 init 公有方法。
创建对象的代码:
用法和上述js创建对象用法一致。
在构造函数中,通过调用this.callParent 方法,实现对属性的初始化。需要说明的是,如果此处只调用了父类的构造方法,则可以省略掉,ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化:
需要注意的是,如果你在子类中使用了构造函数,ExtJS 则不会再自动调用父类的构造函数。和java不一样哦
一般这种情况是使用构造函数来完成传入参数的初始化工作,在传入的参数较多时,就很不方便了。这时Extjs提供了类的选项config。通过config。
我们在类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initConfig方法完成对config的初始化。看一下用法:
除了代码更加清晰简洁以外,ExtJS 还为我们生成了访问器,我们可以通过下面的方式访问Tom的属性:
参考链接:http://www.qeefee.com/extjs-course-3-define-classes
使用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
相关文章推荐
- 使用Fastjson生成Json字符串少字段属性(数据丢失)
- JS可变参数的使用:arguments
- Js String转Int(Number与parseInt的区别)
- Javascript AMD模块化规范
- jstl的tld配置
- 经纬度坐标转为上海地方坐标代码(js代码)
- boost库 json解析
- javascript实现起伏的水波背景效果
- javascript通用函数
- 在Javascript中定义类
- jsp放在web-inf下访问静态资源
- Js判断一个字符串是否包含一个子串
- JavaScript判断用户名和密码不能为空的实现代码
- JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
- js流动式效果显示当前系统时间
- JavaScript禁止复制与粘贴的实现代码
- JavaScript代码性能优化总结(推荐)
- js中indexOf的定义和用法
- cojs 奈特 题解报告
- [Javascript] String method: endsWith() && startsWith()