【翻譯】在Ext JS中創建特定主題的重寫

原文：http://www.sencha.com/blog/creating-theme-specific-overrides-in-ext-js/

作者：Lee Boonstra
                                   Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

Ext JS提供了大量的功能來使類的創建和處理變得簡單，還提供了一系列的功能來擴展和重新現有的Javascript類。這意味著可以為類添加行為和創建屬于自己的類，或者重寫某些函數的行為。在本文，將展示如何實現特定主題類的重寫。

可能你已經知道如何創建Ext JS類的重寫。例如，希望改變默認行為或修補框架。在這種情況下，可以使用以下代碼來創建類的重寫：

Ext.define('SomeClassName', {
    override : 'Ext.panel.Panel'
                                                                                                                                                   
    //the override: by default, all panels will have a 200px width
    width : 200
});

上面的代碼帶來的首個問題是：怎么命名這個重寫的類，以及要將它放在哪里。有時候會需要為重寫的類指定特定的主題。如果將這個javascript重寫與自定義主題捆綁在一起，豈不是更好？例如，在自定義主題中，所有面板都會有陰影。又或者，創建了一個很棒的CSS3動畫用于打開彈出窗口的時候。不幸的是，老版本的IE不能處理CSS3，因此需要一個備用的javascript。在這兩種情況下，默認功能的改變是可見的，因此，怎樣安排這些重寫的文件結構，才不會破壞任何原有的主題呢？

這里的訣竅就是overrides文件夾。使用Sencha Cmd 3.1，使應用程序和包在overrides文件夾中保持類的重寫成為可能。默認情況下，在生成（主題）包的時候，已經包含了這樣一個文件，且已被設置為支撐重寫。

下面來創建一個這樣的javascript備用。這是一個簡單的動畫，在打開彈出窗口的時候會動畫處理不透明度。

在主題包中創建以下文件結構（這里假設此寶的名稱為MyTheme）：

packages
> MyTheme
> > overrides
> > > window
> > > > Window.js

文件結構對應了Ext.window.Window的框架文件結構。

下面來定義類：

Ext.define('MyTheme.window.Window', {
                                                                                                               
});

類將重寫Ext.window.Window：

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
                                                                                                         
});

下面來測試一下重寫工作。首先，在命令行運行以下命令：

sencha app refresh

到目前為止，之前的代碼還沒有改變任何功能，因此，這里將使用console log在類創建的時候輸出一些信息，就可在瀏覽器進行測試了：

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
                                                                                            
}, function(){
    console.log("Oh yes, my override works!");
});

下面來創建自定義行為。這里的重寫會在監聽窗口的beforeshow事件時添加一個動畫：

listeners: {
    beforeshow: function(mywindow){
                                                                                    
    }
}

在beforeshow監聽中要創建一個新的動畫（Ext.fx.Anim），因而需要添加對該類的引用：

requires: ['Ext.fx.Anim'],

下一步，要在beforeshow事件中添加創建動畫的代碼。現在，創建一個非常簡單的動畫，在顯示窗口（mywindow）時將不透明度（opacity）從隱藏平滑的過渡到100%：

Ext.create('Ext.fx.Anim', {
    target: mywindow, //argument of the beforeshow event
    duration: 1000, //ms
    from: {
        opacity: 0
    },
    to: {
        opacity: 1
    }
});

現在，看可以測試一下動畫是否能工作了。


非常糟糕的是，下面要創建的CSS3動畫只支持現代瀏覽器。因此，需要做一個判斷，只有在IE（IE9或更低）是舊版本的時候才執行這個Ext JS動畫。

if(Ext.isIE9m) {
                                               
}

確保代碼如以下所示：

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window',
                                        
    requires: ['Ext.fx.Anim'],
    closeAction: 'hide',
    listeners: {
        beforeshow: function(mywindow){
                                        
            if(Ext.isIE9m) {
                Ext.create('Ext.fx.Anim', {
                    target: mywindow,
                    duration: 1000,
                    from: {
                        opacity: 0
                    },
                    to: {
                        opacity: 1
                    }
                });
            }
        }
    }
});

這里唯一的問題是，對于CSS3動畫，需要使用Sass代碼，為此，需要使用到Compass。

在主題包，要在packages/MyTheme/sass/src/window/Window.scss文件中添加以下Sass代碼。下面的代碼與javascript文件中的代碼的效果是相同的。

@import "compass/css3/transition";
                               
.x-window.x-hide-offsets {
    @include opacity(0);
}
                               
.x-window {
    @include single-transition(opacity, 1000ms);
    @include opacity(1);
}

需要將Sass樣式表編譯到生產使用的CSS代碼中。由于這包含在Sencha Cmd和Sencha的生成過程中，所以在使用Sencha Cmd生成應用程序時2，Sass樣式表會自動編譯。

現在，還不需要生成整個應用程序，只需要快速測試動畫，因而只編譯一下樣式表就行了。要實現這個，在命令行運行以下命令就行了：

sencha ant sass

或者

sencha app watch

第一個命令會運行Apache Ant任何來編譯一次Sass。第二個命令功能更強大，不過它要求下載并安裝Java開發工具包7。可以對比一下sencha app watch和Compass命令compass watch。Sencha Cmd會監視應用程序，每當但單擊保存的時候，Sencha Cmd就會編譯應用程序并編譯Sass樣式表。當改變被檢測到的時候，只會執行最低限度的工作，以便更新應用程序和CSS，并重新生成Sass。

瞧……動畫已經可以在舊和新的瀏覽器中工作了。。

如果想聊更多的高級Ext JS主題技術，請關注Ext JS高級主題課程。通過查閱http://www.sencha.com/training/來參加遍布世界各地的高級主題課程。