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初始化。

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

Extjs学习笔记——Ext自定义类
  • zhengzebinhao
  • zhengzebinhao
  • 2015年11月20日 00:31
  • 340

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

一、 ExtJS5  自定义类         ExtJS5 允许用户使用Ext.define 自定义类。本文将通过实例介绍如何使用Ext.define自定义类。由于作者本人是学java的,Java...
  • huitiaowudeyu
  • huitiaowudeyu
  • 2015年03月19日 12:39
  • 761

ExtJS学习(一)Ext自定义类实现

工作中项目需要extjs,所以学习一下,做个笔记防止遗忘了。以后回忆起来也方便。 首先下载extjs官网地址:http://extjs.org.cn/ 下载以后的目录结构: 先写一个入门的程序吧...
  • qq_30739519
  • qq_30739519
  • 2016年03月12日 09:26
  • 5835

extjs学习笔记(基本语法实例代码)

//链接 function showUrl(value){   return ""+value+""; } //性别区分(CSS样式添加) function  showSex(value){...
  • fm19901229
  • fm19901229
  • 2012年10月25日 15:24
  • 4139

extjs动态添加控件

  • 2009年09月06日 15:52
  • 4KB
  • 下载

extjs ADD()方法的添加

在extjs中如果是在panel中动态添加item时。layout布局不能为:border;否则用add()方法追加时,出提示添加上。但在doLayout之后。页面不会显示。 最好用其他的布局格式...
  • super3000xp
  • super3000xp
  • 2011年09月09日 11:13
  • 564

使用Ext.define自定义类

Ext.define 自定义类 ************************************************************************* 转载理由:该博文详细...
  • snn1410
  • snn1410
  • 2014年02月10日 11:12
  • 3508

extjs自定义组件类

extjs 自定义组件
  • peihexian
  • peihexian
  • 2014年12月05日 14:05
  • 1886

5、ExtJs——Ext基础架构--define定义一个类

如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的。那么我们现在就开始学习ExtJS的基础架构。 如何创建一个Ext的类、创建类的复杂流...
  • kaoa000
  • kaoa000
  • 2014年09月17日 19:49
  • 11315

ExtJS系列学习(4)——Ext类

Ext类是ExtJs的核心基础,它即代表着ExtJs框架的命名空间,又是提供基础功能的静态类。该类主要提供了继承、兼容等功能。另外还提供了一组工具函数,所以学习ExtJs首先需要攻破就是Ext类。 ...
  • tengweichen126
  • tengweichen126
  • 2011年10月15日 23:40
  • 1372
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs学习笔记——Ext自定义类
举报原因:
原因补充:

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