ExtJS 4.2 教程-03:使用Ext.define自定义类
ExtJS 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类,并介绍ExtJS 的动态加载(Require方法)的使用方法。
Javascript自定义类
在Javascript中,自定义类是这样的:
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 公有方法。当类创建的时候,会定义通过调用init方法实现类的初始化(所以init方法可以看作是类的构造函数)。我们看一下该类的用法:
var Tom = new Person("Tom", 26);
Tom.Say("Hello");
运行效果如图:
我们简单的介绍了如何在原生的Javascript中自定义类,由于本文重点是介绍ExtJS 中自定义类的方法,所以更多关于Javascript 自定义对象的方法,您可以参考我之前的文章:《自定义Javascript类》,下面进入本文的正题,看看如何使用ExtJS.define 方法自定义类。
ExtJS 中自定义类
在ExtJS中,我们同样定义一个Person类,首先看一下具体的代码:
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;
}
});
在这段代码中,我们使用了Ext.define方法自定义一个Person类,它同样具有Name 和 Age 属性,具有Say 方法,constructor 则的它的构造函数,有了专用的构造函数,我们就省去了写init方法的代码,直接在构造函数中完成对类的初始化,它的使用方法没有改变,仍然是之前的代码:
var Tom = new Person("Tom", 26);
Tom.Say("Hello");
看一下运行效果:
ExtJS 中类的继承
ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Developer类,它继承自Person,同时还拥有Coding方法,代码如下:
Ext.define("Developer", {
extend: 'Person',
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码", code);
},
constructor: function(){
this.callParent(arguments);
}
});
从代码中可看出,ExtJS 使用 extend来实现继承。我们为Developer 类添加了Coding 方法,这是我们对Person类进行的扩展。在构造函数中,通过调用this.callParent 方法,实现对属性的初始化。需要说明的是,如果此处只调用了父类的构造方法,则可以省略掉,ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化:
Ext.define("Developer", {
extend: 'Person',
Coding: function (code) {
Ext.Msg.alert(this.Name + " 正在编码", code);
}
});
需要注意的是,如果你在子类中使用了构造函数,ExtJS 则不会再自动调用父类的构造函数。
我们要使用Developer类,代码很简单:
var Bill = new Developer("Bill", 26);
Bill.Coding("int num1 = 0; ");
运行效果如图:
ExtJS 中类的选项 - config
首先看一个例子,我们在ExtJS中定义一个Window对象,代码如下:
var win = Ext.create("Ext.window.Window", {
title: '示例窗口,
width: 300,
height: 200
});
win.show();
在上面的代码中,我们通过Ext.create方法创建了一个Window 对象,Ext.create 方法的第一个参数是类名,第二个参数是类的选项,它是一个JSON格式的对象,用来初始化Window对象。我们的窗口运行如下:
试想一下,如果我们的类中有几十个属性,那么我们使用构造函数就要传入几十个参数来对它完成初始化,这是一件很恐怖的事情。还好ExtJS 为我们提供了这种便利,我们可以在定义类的时候为它添加配置项,然后调用ExtJS 内置的方法完成初始化,并可以生成访问器(类似于C#里面的get和set方法)。
我们来修改Person类,使它可以通过config初始化:
Ext.define("Person", {
config: {
Name: '',
Age: 0,
},
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
我们在类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initConfig方法完成对config的初始化。看一下用法:
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");
我们在定义Person类对象的时候,使用Ext.create方法,传入类名Person以及配置项,然后调用Tom的Say方法,运行效果如图:
除了代码更加清晰简洁以外,ExtJS 还为我们生成了访问器,我们可以通过下面的方式访问Tom的属性:
Tom.setAge(20);
alert(Tom.getAge());
ExtJS 生成了get、set方法,我们可以通过这样的方式来访问对象的属性。
ExtJS 中类的别名 - alias
在我们查看ExtJS API 的时候,在左侧常会有这样的说明:
红色方框圈出的部分是这个类的别名,它对应类的全称是 Ext.window.Window,由此可以看出别名更加简单,容易记忆和书写。我们在实例化类的时候,可以使用别名来替代类名全称,例如我们之前定义的win对象,他的代码可以修改为:
var win = Ext.create("Ext.Window", {
title: '示例窗口',
width: 300,
height: 200
});
win.show();
看完例子,你是否也想在自定义类中实现别名呢?为了更好的演示别名,我们对Person类做一个简单的修改,将类名的全称修改为MyApp.Person(相当于为Person添加了命名空间):
Ext.define("MyApp.Person", {
config: {
Name: '',
Age: 0,
},
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
我们只修改了第一行,其它代码不变。这个时候我们使用之前的代码实例化Person类:
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");
刷新页面,很不幸的是我们得到了两个错误:
第一个错误,ExtJS的动态加载检测到系统当前没有Person类的定义,于是就自动加载Person.js,这个路径是不存在的,于是出现了404未找到错误。关于动态加载的问题我们接下来会讲到。
第二个错误,Person 未被定义,所以系统抛出类型错误信息。要想解决这个问题,我们需要将Ext.create方法的第一个参数修改为 "MyApp.Person"。但我们在这里不这样做,因为我们依然希望通过使用Person来完成,那么怎么办呢?这时就用到别名了。
我们为MyApp.Person 类添加别名:
Ext.define("MyApp.Person", {
config: {
Name: '',
Age: 0,
},
alias:"Person",
Say: function (msg) {
Ext.Msg.alert(this.Name + " Says:", msg);
},
constructor: function (config) {
this.initConfig(config);
}
});
很简单,只要一行代码,ExtJS 为我们完成了别名的定义。
重新刷新页面,我们得到了想要的结果:
ExtJS 中的动态加载
在Ext.create 方法的介绍中,有这样一段描述:
它的意思是:如果Ext.loader 可用,且类还没有被定义,它将试图通过同步加载来加载类。
接下来我们来试试类动态加载的功能。我们的类MyApp.Person 类的位置是:
我们要告诉ExtJS,我们的MyApp命名空间的路径,代码如下:
window.rootUrl = "@Url.Content("~/")";
Ext.Loader.setConfig({
enabled: true,
paths: {
MyApp: rootUrl + "Resources/js/MyApp"
}
});
我们可以将这段代码写在Layout中,因为它在每个页面中都要用到。
在完成Loader 的配置以后,我们就可以移除掉对Person.js的引用了,然后我们的程序依然能够正确的运行:
var Tom = Ext.create("MyApp.Person", {
Name: 'Tom',
Age: 26
});
Tom.Say("Hello");
注意,我们这里使用的是类的全称,因为使用别名的时候没有办法找到正确的路径。加载器会通过类名类匹配路径中的MyApp,然后加载Person.js。
另外,我们还可以手动的加载Person.js,代码如下:
Ext.require("MyApp.Person");
当手动加载MyApp.Person 类以后,我们就可以继续使用别名来定义类的对象了:
var Tom = Ext.create("Person", {
Name: 'Tom',
Age: 26
});
在本节中,我们介绍了在ExtJS 中自定义类的一些方法,以及动态加载的部分内容。自定义类还可以通过mixins 实现多继承的关系(将别的类中的方法导入该类中),通过requires 实现依赖其它类的关系(在实例化的时候会自动加载依赖的类),通过将 singleton 指定为 true 类定义单例类(该类只能有一个实例),通过statics 定义静态方法等。
在下面的章节中,我将介绍如何使用数据模型,请敬关注!
ExtJS 4.2 教程-03:使用Ext.define自定义类的更多相关文章
- Extjs 学习总结-Ext.define自定义类
本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...
- Extjs-4.2.1(二)——使用Ext.define自定义类
鸣谢:http://www.cnblogs.com/youring2/archive/2013/08/22/3274135.html --------------------------------- ...
- ExtjS学习--------Ext.define定义类
Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...
- ExtJS 4.2 教程-07:Ext.Direct
转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-7-Ext-Direct ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4.2 教程 ...
- ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承
(1)Ext.define的继承extend 详细实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ n ...
- ExtJs 学习之开篇(-)之define
Ext.onReady(function(){ /** * test1,声明一个类,定义类中的方法 */ Ext.define("demo.Demo",{ ...
- ExtJS简单的动画效果(ext js淡入淡出特效)
1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...
- ExtJS学习(一)Ext自定义类实现
工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了.以后回忆起来也方便. 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧自定义 ...
- Ext.define细节分析
自己写的其实还是不懂,再看看别人写的吧Extjs4 源码分析系列一 类的创建过程https://www.cnblogs.com/creazyguagua/p/4302864.htmlhttp://ww ...
随机推荐
- Archlinux安装笔记
由于自己的电脑上暂时还没有足够的硬盘空间,所以先暂用虚拟机来装一下Archlinux,在安装好VMware Workstation之后,从Archlinux官网的下载页面下载到了最新的镜像文件.之后新 ...
- KnockoutJs学习笔记(十一)
enable binding往往作用于form elements,比如input.select和textarea等.包含enable binding的DOM元素会依照enable binding参数的 ...
- zabbix3.4+grafana5.0.1数据可视化
转自:https://blog.csdn.net/xiaoying5191/article/details/79530280
- has the wrong structure
mysql 5.6升级到5.7之后报错 root@localhost:mysql.sock [test]>show variables like '%log%' ; ERROR 1682 (HY ...
- [Python]conda与 virtualenv虚拟环境配置
参考: Anaconda使用总结 Anacodna之conda与 virtualenv对比使用教程,创建虚拟环境 conda设置Python虚拟环境 python的virtualenv环境与使用 有时 ...
- 跟厂长学PHP7内核(八):深入理解字符串的实现
在前面大致预览了常用变量的结构之后,我们今天来仔细的剖析一下字符串的具体实现. 一.字符串的结构 struct _zend_string { zend_refcounted_h gc; /* 字符串类 ...
- MySQL服务器SSD性能问题分析与测试
[问题] 我们有台HP的服务器,SSD在写IOPS约5000时,%util达到80%以上,那么这块SSD的性能究竟有没有问题,为解决这个问题做了下面测试. [工具] blktrace是linux下用来 ...
- JavaScript中的Map、Set及其遍历
Map Map是一组键值对的结构,具有极快的查找速度. Map的定义. //空map设值key-value var m = new Map(); m.set("XiaoMing", ...
- zoj 3460 二分+二分图匹配
不错的思想 /* 大致题意: 用n个导弹发射塔攻击m个目标.每个发射架在某个时刻只能为 一颗导弹服务,发射一颗导弹需要准备t1的时间,一颗导弹从发 射到击中目标的时间与目标到发射架的距离有关.每颗导弹 ...
- 一键安装LNMP/LAMP
安装步骤:1.使用putty或类似的SSH工具登陆VPS或服务器: 登陆后运行:yum install screen安装 screen screen -S lnmp创建一个名字为lnmp的会话 2. ...