ExtJS教程(3)--- Ext中类的使用

本章仅仅介绍Ext中类的基础知识,一些高级知识会在以后的章节中穿插介绍

注:由于截图上传较为麻烦,且图片占用篇幅较大,所以在以后的文章中如果不是特别必要,将不会插入很多图片,最终的执行结果请大家自行验证。

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中类的使用

时间: 2024-08-03 19:12:14

ExtJS教程(3)--- Ext中类的使用的相关文章

ExtJS教程(5)---Ext.data.Model之高级应用

1.Model的数据验证 这里借助官方的一个例子来说Model数据验证的基本用法 Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' }, { name: 'gender', type: 'string' }, { name: 'username

ExtJS 4 【Ext.data.proxy.Ajax】

namespace ExtJSProject.WebApi.Models { [Serializable] [DataContract] public class Person { [DataMember] public string Name { get; set; } [DataMember] public int Age { get; set; } } }   namespace ExtJSProject.WebApi.Controllers { [RoutePrefix("api/Per

ExtJS教程(2)--- Javascript类和对象基础知识

Javascript中的类其实就是一个function 如下面定义一个Person类 //定义一个类 function Person(){ this.name = 'jaune'; this.age = 18; } //创建一个对象 var person1 = new Person(); console.log(person1); /* * 控制台打出以下内容 * Person {name: "jaune", age: 18} */ 上面是一个简单的定义类及创建类的方法 //定义一个带

ExtJs 中的ext.date

获取当前日期直接用NEW date() Ext.Date英文API http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date Ext.Date是一个单例类,封装了一系列日期操作函数,扩展JavaScript Date的功能,下面列出一些常用的功能. Ext.Date.add(date, interval, value) 给date增加或减少时间,这个函数不改变原有Date对象的值,而是返回一个新的Date对象. Ext.Date.between(date

extjs笔记(一) ext.onready()用法

定义:加载完ExtJs库之后,开始加载OnReady中指定的函数 参数:onReady( fn, scope, options ) fn回调函数 表示要执行的函数 scope表示函数的作用域 表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可. 事例探究一:加载方法的作用 a. function a(){ alert("every thing is OK!") } Ext.onReady(a); b. Ext.onReady(function(){ a

【ExtJS】使用Ext.create( [String name], [Object... args] ) : Object实例化类

在ExtJS中实例化类可以使用全类名或者别名以及备用名 // alias 别名 var window = Ext.create('widget.window', { width: 600, height: 800, ... }); // alternate name 备用名 var window = Ext.create('Ext.Window', { width: 600, height: 800, ... }); // full class name 完整的类名 var window = E

Extjs 更新数据集Ext.PagingToolbar的start参数重置的处理

问题:当翻页后,比如当前是第二页,start参数此时是5(初始为0),当切换左侧分类时,我们期望的是从所选分类下明细记录的第一条开始显示,结果发现不是这样,依然是从新数据的第二页开始显示,就是说extjs默认传递的start参数没有重置为0,依然是5,这样后台通过sql分页就会出问题,解决方法是,对store的currentPage赋值,如下 filestore.currentPage = 1; treePanel.getSelectionModel().on('select', functio

【extjs】 extjs5 Ext.grid.Panel 搜索示例

先看效果图: 页面js: <script type="text/javascript"> /** * 日志类型 store * */ var logTypeStore = Ext.create('Ext.data.Store', { fields: ['type', 'name'], data : [ {"type":"1", "name":"登录日志"}, {"type":

ExtJS 4 【Ext.container.Viewport】

  Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ title: '1', region: 'north', html: ' <a href="../../Default.html">首页</a>', height: 100 }, { title: '2', region: 'west', width: 150, html: 'l