[Ext JS 4] Extjs 之 initComponent 和 constructor的區別

標籤：style   http   color   使用   檔案   os   

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 就可以達到開發的要求了。