[Ext JS 4] Extjs 之 initComponent 和 constructor的区别

initComponent 和 constructor是什么

Extjs 提供的组件还是挺丰富的, 但是有时候需求更丰富。

当Extjs 原生的组件无法实现我们的要求的时候, 就需要扩展Extjs 的组件实现自制组件了。

除了这种使用状况, 有时候对于一些相同却有使用很多的配置, 可能像把它独立出来,单独设为一种组件供大家调用, 节省开发时间和提高代码重用度。

initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式。

Ext.define 实现扩展

在Extjs 中使用Ext.define来实现扩展, initComponent 和 constructor的使用方式类似

	Ext.define(‘Ext.oscar999.button.MyButton‘, {
		extend : ‘Ext.button.Button‘,
		initComponent : function() {
			//do something
		},
		constructor : function() {
			//do something
		}
	});

一般状况上,加上 xtype 的定义, 类似:

(在旧的Extjs 版本中使用 Ext.extend 实现扩展)

那么这两种用法究竟该如何使用? 两者的使用又有什么差别呢?

initComponent 和 constructor区别于联系

1. initComponent这个方法是在Ext.Component的构造函数(constructor)中调用的,只有直接或间接继承自 Ext.Component的类才会在constructor里调用initComponent方法

看一下  Ext.AbstractComponent的源码文件 src/AbstractComponent.js

在  constructor方法中调用了initComponent

2.

1)自定义类中的 initComponent 函数中必须调用 callParent();否则 调用者无法初始化这个对象

2)针对button 这样的扩展组件来说,自定义类中的  constructor ,需要调用callParent( arguments);否则 调用者无法初始化这个对象

this.callParent(arguments);

这里的arguments 是需要的。

(在Extjs 4 之前的版本中, 可能会看到比较多的XXX.superclass.constructor.call 写法)

sencha 的官网中有一篇针对这两个区别的讨论:

http://www.sencha.com/forum/showthread.php?47210-constructor-Vs-initComponent

不过语法是基于Extjs 3 来讨论的, 笔者觉得作用不是很大。

就笔者实际的开发经验来看, 基本上使用initComponent 就可以达到开发的要求了。

[Ext JS 4] Extjs 之 initComponent 和 constructor的区别

时间: 2024-10-12 03:08:59

[Ext JS 4] Extjs 之 initComponent 和 constructor的区别的相关文章

[Ext JS 4] Extjs 图表 Legend(图例)的分行与分列显示

Extjs 中的Chart 的legend. Legend, 翻译过来的意思是图例. 在Extjs 的Chart 中, 到底代表什么呢? 直接看这张图: 右边红色框起来的部分就是Legend 了. 在 Extjs Chart 的定义中, 可以通过配置 legend 的配置值(configs)来设置Legend 显示的位置和样式: position 配置显示的位置:可以设置的值有 "top","bottom", "left", "righ

<ext JS> EXTJS的安装、sencha Cmd的安装、EXTJS数据包等

一.EXT的安装 Ext JS SDK. 在右方选择EXTJS,在输入邮箱,选中接受,然后下载,通过邮件的方式发送下载链接. 二.EXTJS的类声明方式与实例化操作 EXTJS声明方法:Ext.define(); EXTJS实例化方法:Ext.create(); 三.组件 组件(component) 是对数据和方法的简单封装. 组件体系: 这种元素间的关系使得组件呈现层级关系.下图 展示了 ExtJS4.x 中组件间层级关系一种实例. 子组件通过容器的items加入到容器中,下面这个例子通过Ex

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.

Ext JS 6应用程序Build后出现“c is not a constructor return new c(a[0])”的处理

概述 在对Ext JS 6的应用程序打包后,时不时会出现以下错误: 由于是压缩后出现的错误,要进行调试也无从下手,因而这个错误会令新手手足无措,不知道是怎么回事. 错误原因 造成该错误的主要原因是要创建的类在打包时没有包含在包内,又或者是类名错误造成的.我遇到的一个比较典型的错误就是在requires中使用了Ext.MessageBox而不是Ext.window.MessageBox,就会出现该错误. 解决办法 虽然知道该错误是由于类名造成的,但苦于无法知道是那个文件中的requires出现的问

[Ext JS 4] 实战之Chart 坐标控制(单坐标,双坐标)

前言 在Extjs 中, 单一的 Column Chart 的展示效果如上. 定义的步骤如下: 1.  创建一个 Ext.chart.Chart 2. 创建两个坐标轴, axes 一个 Category 类型的横坐标用来显示日期 一个Numeric 类型的纵坐标用来显示数据 3. 配置显示的图 series 配置 column 类型的柱状图. 具体代码如下: <!-- Author : oscar999 Date : ALL RIGHTS RESERVED --> <!DOCTYPE h

【转载】《Ext JS 4 First Look》翻译之一:新特性

免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:^_^肥仔John      原文地址:http://www.cnblogs.com/fsjohnhuang/archive/2013/01/29/2880705.html 第一章 新特性 Extjs 4相对于之前的版本作出了重大的修正.其中包括全新的类系统.新平台的引入.API的修整和加强还有新组件的引入(如新的图表和图形组件).Extjs 4提供更快速.更稳定的用户体验,

【翻译】Ext JS——高效的编码风格指南

原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字来创建一个组件或类的实例是一种错误的做法,因为这没有遵循组件的生命周期.应该使用Ext.create方法来创建对象,例如: 错误: var obj = new Ext.panel.Panel(); 正确: var obj = Ext.create('Ext.panel.Panel'); 初始化直接量:不要直接

【转】EXT JS MVC开发模式

原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Application.js作为我们程序的入口文件,并在mvc.html中引用Application.js文件.目录结构-->app(根目录)------>controller------>model------>store------>view------>application.js(

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其他网站购物车功能的用户对全选就特别习惯, 所以他们也希望在下拉单中也能有  "ALL" 这样的选项. 但是Extjs 本身提供的多选下拉单,功能比较有限. 之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了. 要求是: 1. 选中"AL