ExtJS 4.2 系列教程(4):使用Ext.define自定义类
博客专区 > hanfeng 的博客 > 博客详情
ExtJS 4.2 系列教程(4):使用Ext.define自定义类
hanfeng 发表于4年前
ExtJS 4.2 系列教程(4):使用Ext.define自定义类
  • 发表于 4年前
  • 阅读 278
  • 收藏 1
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: ExtJS 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类,并介绍ExtJS 的动态加载(Require方法)的使用方法。

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


共有 人打赏支持
粉丝 19
博文 44
码字总数 36874
×
hanfeng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: