Extjs学习笔记——Ext自定义类

原创 2015年11月20日 00:31:15

首先说下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 );
}

代码中定义了Person类,它具有Name和Age两个属性,具有Say和init公有方法,当类创建时回调用init方法实现初始化。init方法可看作是类的构造函数。

Ext自定义类

那么Extjs是如何实现自定义类呢,如下:

Ext.define('Person',{
Name:'',
Age:0,
Say:function(msg){
Ext.Msg.alert(this.Name + 'Says', msg);
},
constructor:function(name,age){
this.name = name;
this.age = age;
}
})

使用Ext.define定义了Person类,它同样具有Name和Age两个属性,具有Say方法,而constructor是它的构造函数,省去了init的方法的代码。

Ext类的继承

Extjs允许对类进行扩展,扩展通过继承来实现,我们对刚刚定义的Person类进行继承,定义一个developer类,它继承自Person,同时拥有Conding方法,如下:

Ext.define('Developer',{
extend:'Person',
Coding:function(code){
Ext.Msg.alert(this.Name + '正在编写', code);
}
constructor:function(){
this.callParent(arguments);
}
})

Ext类的选项

var win = Ext.create('Ext.window.Window',{
title:'text',
width:300,
height:200
});
win.show();

Ext.create方法的一个参数是类名,第二个参数是类的选项,他是一个json格式对象,用来初始化window对象。

Extjs可以在定义类的时候为它添加配置项,然后调用Extjs内置的方法完成初始化,并可生成访问器,如下通过修改Person类,使它可以通过config初始化:

Ext.define('Person',{
config:{
Name:'',
Age:0,
},
Say:function(msg){
alert(this.Name + 'Says:', msg);
},
constructor:function(config){
this.initConfig(config);
}
})

Person类中定义config项,在构造函数中通过调用this.initConfig方法完成对config初始化。

ExtJS5.1学习笔记9——Ext中的Ajax请求

下面的代码展示了在Ext中使用Ajax的方法: 首先是html文件的代码: Ext.onReady(function(){ var form...

ExtJS 4.2 教程-03:使用Ext.define自定义类

ExtJS 4.2 教程-03:使用Ext.define自定义类 转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-3-define-clas...

玩转Extjs5之使用Ext.define自定义类(三)

一、 ExtJS5  自定义类         ExtJS5 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类。由于作者本人是学java的,Java...

[ExtJS5学习笔记]第二十九节 sencha ext js 5.1.0中动态更换皮肤主题

sencha ext js 动态更换皮肤 主题

【转】extjs学习笔记三[Ext+json+jsp构建的动态树]

树节点组合模型package cn.com.jsnh.model.catalog;publicclass TreeModel {privateString node;private CatalogMo...

Ext学习笔记(6):ExtJS中xtype一览

基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 ...

extjs5学习笔记之FormPanel布局与输入框tip提示框+ext输入框验证

直接把代码放上来了  说明在代码中 var event = new Ext.form.FormPanel({ // xtype 默认为panel //title : 'FormPanel', ...

ext4 学习笔记(七)[ExtJS扩展原生Javascript](白鹤翔第一季)

Ext对于原生的javascript对象进行了一系列的扩展,我们把他们掌握好,更能深刻的体会Ext的架构,从而对我们的web开发更好的服务,源码位置,我们可以从开发包的extjs-4.1.1\src\...

[ExtJS6学习笔记]Ext JS6主题系列 (Classic工具包)

本文作者:苏生米沿本文地址:翻译来源:http://docs.sencha.com/extjs/6.0/core_concepts/theming.htmlExtJS提供的可以使用的主题包对于创建一个...

extjs学习笔记一[EXT框架基础]

转载自:http://www.zhuoda.org/lunzi/102660.html 2.1 EXT的事件和类 2.11自定义事件 Ext.onReady(function(){    ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs学习笔记——Ext自定义类
举报原因:
原因补充:

(最多只允许输入30个字)