文档章节

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

hanfeng
 hanfeng
发布于 2014/06/10 20:55
字数 1183
阅读 313
收藏 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 甘特图教程之自定义任务树

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

zkjava
2012/02/24
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甘特图性能优化解决方案

Extjs甘特图的大数据量和性能优化 Extjs甘特图所能支持的数据量,以及界面的渲染和操作性能,是衡量一个甘特图组件是否符合项目需要的重要指标。 为了支持超过万级超大数据量的甘特图,Extjs...

芳草凄凄
2012/03/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部