ExtJS 快速入門 - 簡介

標籤：簡介   元素   alias   封裝   ack   層級   interface   準備   eve   

本文不停更，不羅嗦，上貨：
目前：
ExtJS提供2種使用協議：GPL(免費) 和 商業協議(付費)。
區別請自行擺渡悠。

Ext JS發展簡史
YUI-Ext的作者Jack Slocum(傑克.斯洛克姆)打算對基於BSD協議的Yahoo User Interface (YUI)庫進行自訂的擴充，但後來一度風頭蓋過其父輩YUI；
在2006年底，YUI-Ext被簡化為Ext，反映了它作為一個架構的成熟和獨立。
該公司成立於2007年初，Ext現在為雙執照，使用LGPL和一個商業執照；
在2007年4月1日，發布1.0正式版，現在的版本為6.0；
從4.0開始引入了MVC/MVVM風格的應用架構和SCSS；
從5.0開始，不再支援老舊瀏覽器，如IE5、6、7等；
從6.0開始，Sencha Touch和ExtJS合二為一，標誌著使用者可以開發既能支援傳統案頭、又支援平板或手機的應用

Ext JS架構提供了對MVC和MVVM應用程式架構的支援。這兩種架構方式有一些思想是相同的，都是關注於將應用程式代碼和商務邏輯分離。

What is MVC?

在一個MVC架構中，大多數的類或者是模型（Models），或者是視圖(Views)，或者是控制器(Controllers)。使用者(user)與視圖(Views)互動，視圖(Views)顯示模型(Models)中的資料(data)。這些互動都被控制器(Controllers)監控，為了響應互動當需要時，控制器(Controllers)會更新模型(Models)和視圖(Views)。

通常情況下，模型(Model)和視圖(View)都不知道彼此的存在，因為控制器（Controller）對直接更新負主要責任。一般來講，在一個應用程式中控制器（controllers）包含了大多數的應用邏輯。在理想情況下視圖（views）會包含一點點商務邏輯。模型（models）主要是一個使用者資料介面，包含著管理變化資料的商務邏輯。

MVC的目標是清晰的劃分應用程式中各個類的職責。因為每一個類都有明確的職責，在大型的應用環境中，它們就暗暗解耦了。這就讓應用程式容易測試和維護，代碼複用性也加強了。

What is MVVM?

MVC和MVVM的最大的區別就是MVVM有一種叫做視圖模型(viewmodel)的抽象視圖。視圖模型利用一種叫作資料繫結（data binding）的技術將模型的資料和視圖的展示之間的變化進行調和。

結果是,模型和架構完成儘可能多的工作,最大限度地減少或消除應用程式邏輯直接操作視圖。

MVC and MVVM

為了理解如何在你的應用程式中選擇合適的架構，首先我們應該進一步定義各種縮寫代表什麼：

（M:Model）模型：這是您應用程式的資料。一組類(稱為“模型”)定義了它們資料的欄位(如一個User模型有兩個欄位：使用者名稱和密碼)。通過資料包模型知道如何展示自己,模型也能通過關聯於其它模型聯絡。

模型通常和Stores聯合使用，給表格和其他組件提供資料。對於你可能需要的資料邏輯（比如驗證、轉換等）在模型（Models）中定義是比較理想的。

（V：View）視圖：一個任何類型的組件是一個視圖,視圖即是視覺表示。例如：網格（grids）,樹（trees）和面板（panels）都是視圖（views）。

（C：Controller）控制器：控制器是維護你的視圖邏輯的（view’s logic），並使你的應用程式正常工作。控制器的工作可能包括渲染視圖、路由、執行個體化模型,和任何其他類型的應用程式邏輯。

（VM: ViewModel）視圖模型：視圖模型是一個類，它管理檢視的資料。它允許感興趣的組件綁定和資料更改通知。

對於你的架構代碼，這些應用程式架構提供結構化和一致性。按照約定，我們的建議將對你們有重要的好處:

每個應用程式在相同的方式工作,所以你只需要學一次。

很容易在應用程式之間共用代碼。

您可以使用Sencha Cmd建立最佳化的生產版本的應用程式。（後續會提到)。

一個EXT JS的應用程式的UI使用者介面是有一個或者多個組件構成的組件。所有的組件都是Ext.Component類的子類，允許它們參與自動化生命週期管理組件括執行個體化，渲染，大小，定位還有銷毀。Ext JS提供了一系列有用的組件，任何組件可以很容易地擴充到建立一個定製的組件。

組件的繼承關係 ！！！！！！[非常非常重要的組件]

容器是一個特殊的組件類型，它可以包含其他組件。一個典型的應用程式是有許多嵌套的組件像樹狀結構哪有的組件繼承結構。容器負責管理他們的子組件的生命週期，包含建立，渲染，大小還有位置和銷毀。一個典型的應用程式的組件繼承從頂層的Viewport開始，它還有其它的容器嵌套在裡面。

子組件通過使用容器的items配置增加到容器中，下面的例子使用Ext.create()建立初始化了兩個面板，然後作為Viewport的子組件增加到Viewport中。

var childPanel1 = Ext.create(‘Ext.panel.Panel‘, {    title: ‘Child Panel 1‘,    html: ‘A Panel‘});var childPanel2 = Ext.create(‘Ext.panel.Panel‘, {    title: ‘Child Panel 2‘,    html: ‘Another Panel‘});Ext.create(‘Ext.container.Viewport‘, {    items: [ childPanel1, childPanel2 ]});

容器使用布局管理器來管理組件的大小還有位置，想要擷取關於布局的更多資訊，請訪問 布局和容器指南

XTypes和懶載入

每一個組件都有一個符號名叫做xtype。像Ext.panel.Panel就有一個xtype名叫做‘panel’， 組件的API文檔 列出了所有的組件的xtype。上面的例子展示了如何增加一個已經存在的組件到一個容器中。然而，在大型的應用程式中，著不是理想的，因為不是所有的組件都要被執行個體化，一些組件可能永遠不需要被初始化，這取決於你的應用程式。例如，一個使用tab panel的應用程式只需要擷取使用者點擊之後的那個tab的內容。這就是xtypes派上用處的地方通過允許容器的孩子在前置進行配置，需要的時候才進行執行個體化。

下面的範例程式碼示範了懶執行個體化和呈現一個使用選項卡面板的容器的子組件。每個標籤都有一個事件接聽程式，顯示一個警告標籤時呈現。

Ext.create(‘Ext.tab.Panel‘, {        renderTo: Ext.getBody(),        height: 100,        width: 200,        items: [            {                // Explicitly define the xtype of this Component configuration.                // This tells the Container (the tab panel in this case)                // to instantiate a Ext.panel.Panel when it deems necessary                xtype: ‘panel‘,                title: ‘Tab One‘,                html: ‘The first tab‘,                listeners: {                    render: function() {                        Ext.MessageBox.alert(‘Rendered One‘, ‘Tab One was rendered.‘);                    }                }            },            {                // xtype for all Component configurations in a Container                title: ‘Tab Two‘,                html: ‘The second tab‘,                listeners: {                    render: function() {                        Ext.MessageBox.alert(‘Rendered One‘, ‘Tab Two was rendered.‘);                    }                }            }        ]    });

允許這段代碼，會立即產生第一個tab的alert彈出框。這個發生是因為這是預設的tab頁簽，所以容器就立即調用病執行個體化容器的Tab Panel。

第二個tab框直到點擊的時候才會彈出，這就顯示了需要的時候才會渲染，就是說tab頁簽啟用的時候才會通知render事件。

顯示和隱藏

所有的組件都是在show和hide方法中構造的。用來隱藏組件的預設的css方法是“display:none”但是通過hidemode配置的時候就有所變化了：

var panel = Ext.create(‘Ext.panel.Panel‘, {        renderTo: Ext.getBody(),        title: ‘Test‘,        html: ‘Test Panel‘,        hideMode: ‘visibility‘ // use the CSS visibility property to show and hide thiscomponent    });    panel.hide(); // hide the component    panel.show(); // show the component

浮動組件

浮動組件是通過css絕對路徑將文檔放置在外的，並且不在參與組件的容器的布局的。有些組件像Windows是預設的浮動，所有的組件都可以通過配置來實現浮動：

var panel = Ext.create(‘Ext.panel.Panel‘, {    width: 200,    height: 100,    floating: true, // make this panel an absolutely-positioned floating component    title: ‘Test‘,    html: ‘Test Panel‘});

上述代碼初始化了一個panel，但是沒有渲染。正常情況下，一個組件或者有一個renderTo配置或者當做一個子組件增加到組件的容器中，但是當是浮動組件的時候，都不需要了。浮動組件會在第一次調用show方法的時候被渲染

?
1
panel.show(); // render and show the floating panel
下面有一些對浮動組件來說可以進行配置的一些方法

1.draggable:可以拖動螢幕周圍浮動組件。

2.shadow:定製的外觀浮動組件的影子。

3.alignTo:將浮動組件指定到特定的元素。

4.center() 將組件浮動到組件的中心

建立自訂群組件

成分或者擴充
當建立一個新的UI類的時候，該類必須做出決定是否應該擁有一個組件的一個執行個體,或向外延展群組件

根據功能需要繼承一個最近的基類是被推薦的。這是因為EXT JS提供的自動生命週期管理組件含了當需要的時候自動渲染，自動大小，自動調整位置當通過布局管理的時候，也會自動的從容器中移除和銷毀。

通過組建建立新類比較容易，不推薦使用一個新的類擁有一個組件在外部去渲染和管理。

子類
類系統 讓擴充extjs架構變得非常容易。Ext.Base是所有Ext JS類的構建塊,原型和這個類的靜態成員被其他類繼承。

儘管你可以再低水平的情況下增加一個方法，但是開發人員在通常情況下會想通過高一點的繼承鏈來開始。

下面這個例子建立了一個Ext.Component的子類：

Ext.define(‘My.custom.Component‘, {    extend: ‘Ext.Component‘,    newMethod : function() {       //...    }});

這個例子建立了一個新的類‘My.custom.Component’，它繼承了Ext.Component的所有方法屬性等。

模板方法：EXT JS使用 模板方法模式 代表子類，行為。

這意味著，在繼承鏈中的每一個類都可能貢獻一個額外的邏輯組件的生命週期中的某些階段。每一個類實現自己的專屬的行為，並且允許其他繼承自這個類的實現自己特有的邏輯。

典型例子就是 渲染 方法，render 是定義在Component類中的一個方法，它對初始化組件的呈現階段生命週期負責。render不能被重寫，但是可以調用onRender方法在處理子類實現的時候可以調用來實現自己的特有屬性方法。每一個onRender方法必須調用父類的onRender方法在貢獻自己額外邏輯的時候。

下面的表格展示了onRender模板方法的功能。

render方法被調用（通過布局管理器來實現的）。這個方法不能被重寫也是通過Ext基類實現的，它調用this.onRender方法，這個方法實現了當前子類（如果被實現了的話）。這個就調用父類的版本，以此類推。最終，每個類貢獻了自己的功能，控制返回render方法。

下面是一個組件子類實現

onRendExt.define(‘My.custom.Component’, {
extend: ‘Ext.Component’,
onRender: function() {
this.callParent(arguments); // call the superclass onRender method

    // perform additional rendering tasks here.}

});

得注意的是，許多模板方法都有自己對應的事件，例如渲染事件，是在渲染事件出發的時候執行。然而，當子淚花的時候，它必須使用模板方法在重要聲明周期階段執行類邏輯而不是事件。事件可以通過編程來停止或者暫停。

下面是一些子類可以實現的組件的模板方法：

initComponent:這個方法被類構造方法喚醒，用來初始化資料，設定屬性，附加事件處理。

beforeShow:在組件顯示之前被調用

onShow: 允許添加行為操作，在超類的onShow方法被調用之後就組件就可見了。

afterShow: 方法在組件被顯示之後調用。

onShowComplete:這個方法在afterShow完成之後被調用

onHide:在隱藏的時候可以增加一些操作，調用超類的onHide方法之後，組件就看不見了。

afterHide:組件隱藏之後的事件處理

onRender:渲染的時候執行的事件

afterRender:渲染完成之後可以增加的額外操作。在你這個階段，組件的元素已經根據配置或者css雷鳴增加了類型，並且將會被配置可見度和啟用狀態。

onEable:組件可用性，調用超類的這個事件的時候，組件就可以使用了

onDisable:組件不可用處理的時候的事件。

onAdded:當組件被增加的時候，組件被增加到容器的時候。在這個階段，組件在父類容器的子條目集合中，當調用超類的這個方法之後，容器就是被展現，如果有引用，引用也會被設定。

onRemoved:被移除的時候的事件。這時候，組件以及從父容器之中移除了，但是還沒有銷毀。調用超類的這個方法之後，容器就不會被展現了。

onResize:大小變化的時候的呼叫事件

onPosition:位置變化的時候調用的事件

onDestroy:銷毀的時候的事件

beforeDestroy:銷毀之前

afterSetPosiotion:設定位置之後

afterComponentLayout:組件布局之後

beforeComponentLayout:組件布局之前

我們該擴充哪個類

選擇一個最好的繼承類是一個效率的問題，功能基類必須要提供的。有一種趨勢就是總是繼承Ext.panel.Panel當你設定UI組件的時候，這些組件需要被渲染和管理的時候。

Panel類有如下能力：

Boder

Header

Header Tools

Footer

Footer Buttons

Top toolbar

Buttom toolbar

Containig and managing child Components

如果這些不需要，那麼使用Panel類就是一種資源浪費。

組件
如果需要的組件UI不需要包含其他組件，那就是，如果只是封裝HTML執行某種形式的需求，那麼擴充Ext.Component是合適的。舉例來說，下面這個類是一個組件封裝了HTML的圖片元素，允許通過圖片的src屬性來設定和擷取。在載入的時候也會有方法被觸發。

Ext.define(‘Ext.ux.Image‘, {    extend: ‘Ext.Component‘, // subclass Ext.Component    alias: ‘widget.managedimage‘, // this component will have an xtype of ‘managedimage‘    autoEl: {        tag: ‘img‘,        src: Ext.BLANK_IMAGE_URL,        cls: ‘my-managed-image‘    },    // Add custom processing to the onRender phase.    // Add a ‘load‘ listener to the element.    onRender: function() {        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);        this.callParent(arguments);        this.el.on(‘load‘, this.onLoad, this);    },    onLoad: function() {        this.fireEvent(‘load‘, this);    },    setSrc: function(src) {        if (this.rendered) {            this.el.dom.src = src;        } else {            this.src = src;        }    },    getSrc: function(src) {        return this.el.dom.src || this.src;    }});

使用如下：

var image = Ext.create(‘Ext.ux.Image‘);Ext.create(‘Ext.panel.Panel‘, {    title: ‘Image Panel‘,`這裡寫代碼片`    height: 200,    renderTo: Ext.getBody(),    items: [ image ]});image.on(‘load‘, function() {    console.log(‘image loaded: ‘, image.getSrc());});

Container容器
如果組件包含其他組件，那麼就選容器比較適合了。在面板層級，需要重點記憶的是，Ext.layout.container.Container不是用來被渲染和管理子組件的。

容器擁有下面這些方法：

onBeforeAdd:子組件增加的時候這個方法被調用。通過了新組件,可以用來修改組件,或準備容器。返回false中止添加操作。

onAdd:組件被增加完成的時候調用。它是通過組件已被添加。這種方法可以用於更新任何內部結構可能依賴於狀態的子項目。

onRemove:它是通過組件已被添加。這種方法可以用於更新任何內部結構可能依賴於狀態的子項目。

beiforeLayout:這個方法被調用之前容器已經制定了(如果需要)並呈現它的子組件。

afterLayout:調用該方法後,集裝箱已經制定了(如果需要)並呈現它的子組件。

Panel面板
如果UI介面需要頭資訊，底部資訊，工具條，那麼Ext.panel.Panel就是一個合適的選擇。
重要的是:一個面板是一個容器。重要的是要記住,布局是用於呈現和管理子組件。

這類擴充Ext.panel。面板通常非常特定於應用程式的,一般用於彙總其他UI組件(通常是容器,或表單欄位)配置布局,並提供操作手段所包含的組件通過控制tbar bbar。
面板擁有如下的模板方法：

afterCollapse:當摺疊的時候被調用

afterExpand:當展開的時候被調用

onDockedAdd:當停靠的時候調用

ondockedRemove當停靠移除的時候調用。

extjs 組件生命週期
組件有三種類型：基本組件，工具列組件，表單組件。

下面的每一個階段都是從 Component 繼承下來的類的生命週期中重要的階段。

第一個階段：初始化
1、應用配置選項
從 Component 繼承下來的類並不需要提供（通常沒有提供）一個獨立的構造器。
Component 的構造器不僅應用從子類傳過來的配置選項，同時它還做了以下的工作。
2、建立事件
任何組件都有 enabled、disable、beforeshow、show、beforehide、hide、bdforerender、render、
beforedesctory、destory 事件，這些事件可以被任何組件調用。
3、在 ComponentMgr 中註冊組件執行個體
這樣就可以通過 Ext.getCmp 被獲得執行個體引用。
4、調用 initComponent 方法
這是一個最重要的初始化步驟，它是做為一個模板方法，子類可以按需要重寫這個方法。
被建立的類的 initComponent 首先被調用，然後通過組件 提供的 superclass.initComponent 向
上調用。這個方法非常容易被實現，如果需要，你還可以任意覆蓋構造器邏輯。
5、狀態被始化
如果組件有狀態，已儲存的狀態會被重新載入。
6、載入外掛程式
如果組件有指定外掛程式，則外掛程式會在這時候被初始化。
7、組件呈現
如果有配置 renderTo 或 applyTo，組件會馬上被呈現輸出，否則，它會被延遲輸出，直
到組件被顯式調用顯示，或被它的容器所調用輸出。

第二階段：呈現
1、觸發 beforerender 事件
這是一個可取消的事件，如果需要給提供處理函數來阻止組件的繼續呈現輸出。
2、設定容器
如果沒有父容器被指定，預設它的父物件被指定為它的容器。
3、調用 onRender 方法
這是為子類執行呈現工作的一個非常重要的方法，這是一個模板方法，在子類中可以根
據需來重寫它的實現邏輯。直接被建立的類的 onRender 首先被調用，然後它可以通過
superclass.onRender 來調用基類的 onRender 方法。這個方法很容易被重新實現，如果需要你
可以在繼承關係的任意類中重寫這個方法。
4、不隱藏組件
預設，大多數組件都會通過設定像 x-hidden 這個樣式來使它隱藏。當 autoShow 設定為
true 時，這個隱藏功能的樣式會被移除。
5、應用自訂樣式
所有的 Component 子類都支援指定 cls 配置屬性，通過它可以為 Component 所呈現的
HTML 元素指定 CSS 樣式。通過添加組件的 cls 屬性，使用標準的樣式規則，是一個自訂
可視組件顯示效果的非常完美的方法。
6、render 方法被觸發
簡單的通知群組件已經被成功的呈現了。
7、調用 afterRender
這是另一個模板方法，子類根據邏輯需要可以重新實現或覆蓋該方法。所有的子類可以
通過調 superclass.afterRender.來調用父類的方法。
8、組件隱藏或不可用
根據配置選項的值來設定。
9、狀態事件被初始化
可以狀態化的組件會定義一些事件來指定狀態的初始化和儲存。如果提供，這些事件會
被添加。

第三階段：銷毀
1、觸發 beforedestroy 事
這是一個可取消的事件，如果需要，可能通過提供事件代理來阻止組件被銷毀。
2、調用 beforeDestroy 方法
又一個模板方法，在子類中可以重新實現和調用父類的方法。
3、移除事件監聽者（代理）
如果組件已被呈現，則移除它底層的 HTML 元素的事件監聽列表，然後將元素從 DOM
中移除。
4、onDestroy 被調用
這個還是一個模板方法，在子類可以重新實現。這裡需要注意的是，容器類提供了一個
預設的 onDestroy 實現，它會迴圈銷毀它的成員組 。
5、組件執行個體從 ComponentMgr 中反註冊
不可以再通過 Ext.getCmp 擷取到對象執行個體。
6、destroy 事件被觸發
這隻是一個簡單的提醒，表示組件銷毀成功。
7、移除 Component 上的事件代理
組件可以獨立於元素，自己擁有事件代理，如果存在則移除它們。

ExtJS 快速入門 - 簡介