文档章节

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

hanfeng
 hanfeng
发布于 2014/06/10 20:55
字数 1183
阅读 299
收藏 1
点赞 0
评论 0

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
博文 44
码字总数 36874
作品 0
福州
高级程序员
ZooKeeper 可视化工具 - ZooHelper

ZooHelper 一款基于 PHP + ExtJS 开发的 ZooKeeper 可视化工具 工具特性 树形展示znode节点 支持znode节点CURD操作 下载地址 https://github.com/yoonper/ZooHelper 环境要求 Linux PHP >= 5...

YoonPer ⋅ 05/28 ⋅ 0

ExtJS对类型为xtype:button的按钮进行不可用置灰的设置

在项目中会根据业务需要对页面中的组件进行各种操作,比如隐藏、改变组件显示名称、可用不可用等。今天介绍下如何使用ExtJS对xtype:button的按钮进行可用和不可用的设置。 页面中xtype:butto...

laowang2915 ⋅ 05/31 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

物联网和前端技术,两者相辅相成并且互相促进 —— 阿里云 MVP 黄强专访

黄强,江苏智慧新吴信息科技有限公司 ,前端架构师。 一直从事前端开发,从 jQuery,ExtJs,Backbone、Angular 到 React 一路走来,深入实践不同业务领域的前端平台架构,致力于前端工程化和...

花肉酱 ⋅ 04/20 ⋅ 0

创业还差一个程序员?也许你只是没找对方法 —— 南京云栖大会 Tech Insight 创业公司的窘境和解法

你也许经常听到一些人说:”我有一个创业的点子,就差一个程序员了“,也许隔三差五就有人向你打听,哪里能挖到最合适的程序员? 创业是一个永恒的话题,技术人才紧缺也是一个永恒的话题。面...

花肉酱 ⋅ 04/23 ⋅ 0

Maven的本地仓库、中心仓库、私服(NEW)

本地仓库 设置本地仓库到指定目录,而不使用Maven默认的配置(默认放在C:/user/m2.目录下) 打开Maven的解压目录E:softapache-maven-3.1.0conf,修改settings.xml 配置localRepository即可完...

SuShine ⋅ 05/23 ⋅ 0

docker的nginx怎么和php-fpm结合?

我创建了两个docker分别是nginx和php-fpm nginx自己配置成功了(静态文件能访问),但是php文件报错 这个错误!!!!!不是php写的不对,,,,,,不明所以啊 这是 nginx的 的配置 下面的是 在php-fpm容器...

1514582970 ⋅ 02/07 ⋅ 0

Maven私服Nexus3.x环境构建操作记录

Maven私服Nexus3.x环境构建操作记录 Maven介绍 Apache Maven是一个创新的软件项目管理和综合工具。 Maven提供了一个基于项目对象模型(POM)文件的新概念来管理项目的构建,可以从一个中心资...

sietai ⋅ 05/16 ⋅ 0

Extjs 框架如何在css设置labelWidth,并且生效

现在有个语言切换功能,中文四个字(用户管理),宽度60,英文可能就是(User Manage),宽度需要100,同一个js文件,如何设置宽度,就是中英版宽度随语言切换而改变

wang0010 ⋅ 05/05 ⋅ 0

给你一个整型数组(索引从0到n-1,其中n是这个数组的大小,值从0到10000)和一个查询列表。对于每个查询,给你一个整数,返回数组中小于给定整数的元素数。

public static List<Integer> countOfSmallerNumber(int[] A, int[] queries) { List<Integer> result = new ArrayList<Integer>(queries.length); int step =20; if(A!=null && A.length>1)......

一览无余 ⋅ 02/07 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

从 Confluence 5.3 及其早期版本中恢复空间

如果你需要从 Confluence 5.3 及其早期版本中的导出文件恢复到晚于 Confluence 5.3 的 Confluence 中的话。你可以使用临时的 Confluence 空间安装,然后将这个 Confluence 安装实例升级到你现...

honeymose ⋅ 今天 ⋅ 0

用ZBLOG2.3博客写读书笔记网站能创造今日头条的辉煌吗?

最近两年,著名的自媒体网站今日头条可以说是火得一塌糊涂,虽然从目前来看也遇到了一点瓶颈,毕竟发展到了一定的规模,继续增长就更加难了,但如今的今日头条规模和流量已经非常大了。 我们...

原创小博客 ⋅ 今天 ⋅ 0

MyBatis四大核心概念

本文讲解 MyBatis 四大核心概念(SqlSessionFactoryBuilder、SqlSessionFactory、SqlSession、Mapper)。 MyBatis 作为互联网数据库映射工具界的“上古神器”,训有四大“神兽”,谓之:Sql...

waylau ⋅ 今天 ⋅ 0

以太坊java开发包web3j简介

web3j(org.web3j)是Java版本的以太坊JSON RPC接口协议封装实现,如果需要将你的Java应用或安卓应用接入以太坊,或者希望用java开发一个钱包应用,那么用web3j就对了。 web3j的功能相当完整...

汇智网教程 ⋅ 今天 ⋅ 0

2个线程交替打印100以内的数字

重点提示: 线程的本质上只是一个壳子,真正的逻辑其实在“竞态条件”中。 举个例子,比如本题中的打印,那么在竞态条件中,我只需要一个方法即可; 假如我的需求是2个线程,一个+1,一个-1,...

Germmy ⋅ 今天 ⋅ 0

Springboot2 之 Spring Data Redis 实现消息队列——发布/订阅模式

一般来说,消息队列有两种场景,一种是发布者订阅者模式,一种是生产者消费者模式,这里利用redis消息“发布/订阅”来简单实现订阅者模式。 实现之前先过过 redis 发布订阅的一些基础概念和操...

Simonton ⋅ 今天 ⋅ 0

error:Could not find gradle

一.更新Android Studio后打开Project,报如下错误: Error: Could not find com.android.tools.build:gradle:2.2.1. Searched in the following locations: file:/D:/software/android/andro......

Yao--靠自己 ⋅ 昨天 ⋅ 0

Spring boot 项目打包及引入本地jar包

Spring Boot 项目打包以及引入本地Jar包 [TOC] 上篇文章提到 Maven 项目添加本地jar包的三种方式 ,本篇文章记录下在实际项目中的应用。 spring boot 打包方式 我们知道,传统应用可以将程序...

Os_yxguang ⋅ 昨天 ⋅ 0

常见数据结构(二)-树(二叉树,红黑树,B树)

本文介绍数据结构中几种常见的树:二分查找树,2-3树,红黑树,B树 写在前面 本文所有图片均截图自coursera上普林斯顿的课程《Algorithms, Part I》中的Slides 相关命题的证明可参考《算法(第...

浮躁的码农 ⋅ 昨天 ⋅ 0

android -------- 混淆打包报错 (warning - InnerClass ...)

最近做Android混淆打包遇到一些问题,Android Sdutio 3.1 版本打包的 错误如下: Android studio warning - InnerClass annotations are missing corresponding EnclosingMember annotation......

切切歆语 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部