文档章节

ExtJS 4.2 系列教程(4):使用Ext.define自定义类

hanfeng
 hanfeng
发布于 2014/06/10 20:55
字数 1183
阅读 324
收藏 1

1、Javascript自定义类

在Javascript中,自定义类是这样的:

<script type="text/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);
	}
</script>

在这段代码中,我们定义了Person类,它具有name 和 age 两个属性,具有 say 和 init 公有方法。当类创建的时候,会定义通过调用init方法实现类的初始化(所以init方法可以看作是类的构造函数)。我们看一下该类的用法:

<script type="text/javascript">
	var jack = new Person("Jack",25);
	jack.say("Hello");
</script>

运行效果如图:

2、ExtJS 中自定义类

在ExtJS中,我们同样定义一个Person类,首先看一下具体的代码:

<script type="text/javascript">
	Ext.define("Person",{
		name:'',
		age:0,
		say:function(msg){
			Ext.MessageBox.alert("友情提示",this.name + " say: "+ msg);
		},
		constructor:function(name,age){
			this.name = name;
			this.age = age;
		}
	});
</script>

在这段代码中,我们使用了Ext.define方法自定义一个Person类,它同样具有name 和 age 属性,具有say 方法,constructor 则的它的构造函数,有了专用的构造函数,我们就省去了写init方法的代码,直接在构造函数中完成对类的初始化,它的使用方法没有改变,仍然是之前的代码:

<script type="text/javascript">
	Ext.onReady(function(){
		var Jack = new Person("Jack",28);
		Jack.say("Hello,你好!");
	});
</script>

查看运行效果:

3、ExtJS 中类的继承

ExtJS 允许对现有的类进行扩展,其扩展可以通过继承来实现。接下来我们就对刚刚使用ExtJS定义的Person类进行继承,定义一个Student类,它继承自Person,同时还拥有Coding方法,代码如下:

//定义学生类 继承Person
	Ext.define("Student",{
		extend: 'Person',
		coding:function(code){
			Ext.MessageBox.alert(this.name + " 正在鲁代码:",code);
		},
		constructor:function(){
			this.callParent(arguments);
		}
	});

从代码中可看出,ExtJS 使用 Student 类添加了Coding 方法,这是我们对Person类进行的扩展。在构造函数中,通过调用this.callParent 方法,实现对属性的初始化。需要说明的是,如果此处只调用了父类的构造方法,则可以省略掉,ExtJS 会自动为我们调用父类的构造函数。所以我们此处的代码可以进行简化:

//定义学生类 继承Person
	Ext.define("Student",{
		extend: 'Person',
		coding:function(code){
			Ext.MessageBox.alert(this.name + " 正在鲁代码:",code);
		}
	});

需要注意的是,如果你在子类中使用了构造函数,ExtJS 则不会再自动调用父类的构造函数。

我们要使用Student类,代码很简单:

var Jack = new Student("Jack",28);
Jack.coding("Hello World!");

运行效果图:

4、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.MessageBox.alert("友情提示",this.name + " say: "+ msg);
		},
		constructor:function(config){
			this.initConfig(config);
		}
	});

我们在类的定义中添加了config项,将需要在配置中完成的属性添加在里面,而在构造函数中,我们通过调用this.initConfig方法完成对config的初始化。看一下用法:

var zs = Ext.create("Person", {
	    name: "张三",
	    age: 30
	});
	
zs.say("config初始化");

我们在定义Person类对象的时候,使用Ext.create方法,传入类名Person以及配置项,然后调用Tom的Say方法,运行效果如图:

除了代码更加清晰简洁以外,ExtJS 还为我们生成了访问器,我们可以通过下面的方式访问Tom的属性:

Tom.setAge(20);
alert(Tom.getAge());

ExtJS 生成了get、set方法,我们可以通过这样的方式来访问对象的属性。

6、ExtJS 中类的别名 - alias

Ext.define("demo.Person",{
		alias:'Person',
		config:{
			name:'',
			age:0,
		},
		say:function(msg){
			Ext.MessageBox.alert("友情提示",this.name + " say: "+ msg);
		},
		constructor:function(config){
			this.initConfig(config);
		}
	});


© 著作权归作者所有

共有 人打赏支持
hanfeng
粉丝 19
博文 48
码字总数 36874
作品 0
福州
高级程序员
私信 提问
Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成...

鱼煎
2017/11/02
0
0
ExtJs自学教程(1):一切从API开始

该系列文章不侧重全方位的去介绍ExtJs的使用,只是侧重于解决ExtJs问题的思考方法。写的人不用长篇大论,学的人则能够自立更生。l 学习的人只要有一些CSS的javascript的基础知识并且对于英文...

77970290
2013/05/07
0
0
ExtJS 4.2 系列教程(1):Hello ExtJS4

1、下载ExtJS http://www.sencha.com/ 我下载的版本是 ext-4.2.1.883 2、使用Eclipse创建Dynamic Web Project ,不懂的自行google(今天下午彻底挂了)or 百度 3、引入ExtJS库 复制ext目录下...

hanfeng
2014/06/10
0
0
ExtJS 开发总结

不知不觉2008已经走到了尽头,在这近一年中,一直不断的尝试用ExtJS做项目,从1.1到现在的2.2,吃了不少苦头,也有不少收获,总结一下,一起分享! 1. ExtJS的定位是RIA,和Prototype、jQuer...

晨曦之光
2012/04/26
885
1
Extjs 甘特图教程之自定义任务树

Extjs 甘特图自定义任务树 Extjs 甘特图GanttPanel中默认的设置很难满足客户多变需求,我们就针对一些常用的扩展做一个说明。 一般最常用的需求是,自定义多列,自定义行,自定义单元格等等。...

zkjava
2012/02/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Rainbond V5.0 Beta公测公告

Rainbond支撑企业应用的开发、架构、交付和运维的全流程,通过“无侵入”架构无缝衔接各类企业应用,底层资源可以对接和管理IaaS、虚拟机和物理服务器 Rainbond V5.0即日起开启Beta版本公测,...

好雨云帮
19分钟前
2
0
Word Pattern(leetcode290)

Given a pattern and a string str, find if str follows the same pattern. Here follow means a full match, such that there is a bijection between a letter in pattern and a non-empt......

woshixin
25分钟前
0
0
Kubernetes 1.13.1快速升级

Kubernetes 1.13.1已经正式发布,快速升级(含国内镜像快速下载链接)包括升级kubeadm/kubectl/kubelet版本、拉取镜像、升级Kubernetes集群三个主要步骤。注意Kubernetes 1.12.3版本暂时不支...

openthings
28分钟前
2
0
多线程的实现方式

多线程是指 一个程序运行时,产生或使用了不止一个线程。 线程的生命周期是怎么样的,下面这张图我们可以看出些端倪: 这章我们主要讨论多线程实现的方式,基础知识部分我们可以下来再恶补。...

搬砖大侠
41分钟前
1
0
新人千万不要在 Windows 上使用 Ruby on Rails

标题:新人千万不要在 Windows 上使用 Ruby on Rails 副标题:鼓励新人在 Linux 和 Mac 上使用 Ruby on Rails ! 原则:要走寻常路,不要学美特斯邦伟! "在 Windows上 使用 Ruby on Rails "是...

Jason909
49分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部