1、定义一个类

//使用Ext定义一个类
Ext.define('Person',{name:'jaune',age:18
});
//创建一个类
var person = new Person();
console.log(person);

从打出来的结果中可以看出我们定义的属性已经出现在了类中。这是Ext中最简单的类的定义方式

注意上图中的superclass，我们用Ext定义的类如果没有指明继承自哪个类，默认都是继承自Ext.Base，这个类就相当于Java中的Object类，是Ext所有类的基类。如何继承其他类会在下面讲到。

2、Ext中构造函数

Ext.define('Person',{name:'jaune',age:18,constructor:function(config){Ext.apply(this,config);}
});
//创建一个类
var person = new Person({name:'petty'
});
console.log(person);

这里的apply与第二章中的apply类似，Ext同样有applyIf函数，用法与第二章中的applyIf类似，第二章中的apply和applyIf函数就是仿照的Ext中的这两个函数写的.。如果大家有兴趣查看源码的话可以再Ext的帮助中找到Ext.apply方法然后点击后面的“view source”查看其源码。

3、类的继承

//使用Ext定义一个类
Ext.define('Person',{name:'jaune',age:18,constructor:function(config){Ext.apply(this,config);}
});//类的继承
Ext.define('Man',{extend:'Person',sex:'Male',constructor:function(config){//这里是为了确保创建的对象中的sex属性是Male，如果config中有sex属性就删除这个属性if(config.hasOwnProperty('sex')){delete config.sex;}/** callParent的意思就是调用父类同名的方法，这里用作继承父类构造方法* 比如父类中有一个toString方法，在子类的toString方法中调用this.callParent()方法，则会执行父类中的toString方法* 这个大家可以亲自验证*/this.callParent([config]);},//这个方法是为了方便打印toString:function(){return {name:this.name,age:this.age,sex:this.sex};}
});var man = new Man({name:'tom',sex:'Female'
});
console.log(man.toString());
/** 打印结果如下* Object {name: "tom", age: 18, sex: "Male"} */

man对象创建的过程是，new对象时将config传入Man类的构造函数中，然后Man的构造函数将sex属性过滤掉，然后调用父类的构造方法将config中的属性赋予man对象

4、类的静态属性和静态方法

/*** statics 可以包含类的静态和静态方法，但是不能被子类继承* inheritableStatics 与statics类似但是可以被子类继承*/Ext.define('DateUtil',{inheritableStatics:{currentDate:Ext.Date.format(new Date(),'Y-m-d'),getCurrentDate:function(formatStr){if(Ext.isString(formatStr)){Ext.Date.format(new Date(),formatStr);}else{return this.currentDate;}}}
});
console.log(DateUtil.currentDate);
Ext.define('TimeUtil',{extend:'DateUtil',statics:{currentTime:Ext.Date.format(new Date(),'Y-m-d H:i:s')}
});
console.log(TimeUtil.currentDate);

上面的两个类，如果DateUtil中用的是statics属性来定义静态属性和方法则TimeUtil无法继承

5、单例

在Ext中定义单例模式的类非常简单，在定义类的时候加上singleton:true 就表示要定义的类为单例，剩下的事情Ext会替你解决，只需要像定义普通类一样编码就可以了。

Ext.define('DateUtil',{singleton:true,currentDate:Ext.Date.format(new Date(),'Y-m-d'),getCurrentDate:function(formatStr){if(Ext.isString(formatStr)){Ext.Date.format(new Date(),formatStr);}else{return this.currentDate;}}
});console.log(DateUtil);

JS中的单例其实就是将类实例化，可能没有大家想的那么复杂

ExtJS教程（3）--- Ext中类的使用相关推荐

实用ExtJS教程100例-004：等待对话框Ext.MessageBox.wait
在前面两节中,我们分别演示了ExtJS三种常用的对话框和ExtJS带有进度条的对话框.在本节内容中,我们来看看ExtJS中的等待对话框. 首先来看一个简单的例子[查看在线示例]: 这种对话框会一直滚动 ...
实用ExtJS教程100例-006：ExtJS中Window的用法示例
在前面几个示例中,我们演示了MessageBox的各种用法,今天这篇文章将演示如何使用Window. 我们首先来创建一个窗口: var win = Ext.create("Ext.windo ...
实用ExtJS教程100例-002：MessageBox的三种用法
在上一节中,我们用到了MessageBox,在本文中,我们将介绍一下ExtJS中常用的三种MessageBox. Ext.MessageBox.alert() 这个方法用来打开一个普通的对话框,对话框 ...
EXTJS教程(2)
本文由www.javajxw.com整理提供要使用ExtJS,先要得到ExtJS库文件,ExtJS库文件可以到ExtJS官网下载,地址是www.extjs.com/products/gxt/down ...
ExtJS教程（5）---Ext.data.Model之高级应用
1.Model的数据验证这里借助官方的一个例子来说Model数据验证的基本用法 Ext.define('User', {extend: 'Ext.data.Model',fields: [{ nam ...
ExtJS教程（7）---Ext.data.Store中事件的应用
为了"持之以恒",写的有点草率,随后会修正上节说了Ext.data.Store的基本用法,以及各种场景该怎么用,这节说项Store的事件的用法 beforeload:在数据加载前 ...
实用ExtJS教程100例-009：ExtJS Form无刷新文件上传
文件上传在Web程序开发中必不可少,ExtJS Form中有一个filefield字段,用来选择文件并上传.今天我们来演示一下如何通过filefield实现ExtJS Form无刷新的文件上传. 首先 ...
ExtJs Grid 合计 [Ext | GridPanel | GridSummary]
前言五一期间学习Ext很痛苦也很快乐,到现在也算是小有所成,陆陆续续的开始在项目中使用,Ext的表格据统计是使用率最高的一个组件,实在是很强大,但我以为关键是很漂亮,而他本身并不支持数据的统计功能, ...
Extjs 实战之 Ext.tree.TreePanel Tree无法显示
这里使用的是 Ext.ux.tree.ColumnTree, 这是一个TreePanel的扩展类, 从Extjs下载的官方包里就包含了这个. 1. 问题描述: tree 的头部显示正常, 数据部分在F ...

ExtJS教程（3）--- Ext中类的使用