【翻譯】在Ext JS中創(chuàng)建特定主題的重寫

原文：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提供了大量的功能來使類的創(chuàng)建和處理變得簡單，還提供了一系列的功能來擴展和重新現(xiàn)有的Javascript類。這意味著可以為類添加行為和創(chuàng)建屬于自己的類，或者重寫某些函數(shù)的行為。在本文，將展示如何實現(xiàn)特定主題類的重寫。

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

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

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

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

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

在主題包中創(chuàng)建以下文件結(jié)構(gòu)（這里假設(shè)此寶的名稱為MyTheme）：

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

文件結(jié)構(gòu)對應(yīng)了Ext.window.Window的框架文件結(jié)構(gòu)。

下面來定義類：

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

類將重寫Ext.window.Window：

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

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

sencha app refresh

到目前為止，之前的代碼還沒有改變?nèi)魏喂δ?，因此，這里將使用console log在類創(chuàng)建的時候輸出一些信息，就可在瀏覽器進行測試了：

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

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

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

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

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

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

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

現(xiàn)在，看可以測試一下動畫是否能工作了。


非常糟糕的是，下面要創(chuàng)建的CSS3動畫只支持現(xiàn)代瀏覽器。因此，需要做一個判斷，只有在IE（IE9或更低）是舊版本的時候才執(zhí)行這個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樣式表編譯到生產(chǎn)使用的CSS代碼中。由于這包含在Sencha Cmd和Sencha的生成過程中，所以在使用Sencha Cmd生成應(yīng)用程序時2，Sass樣式表會自動編譯。

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

sencha ant sass

或者

sencha app watch

第一個命令會運行Apache Ant任何來編譯一次Sass。第二個命令功能更強大，不過它要求下載并安裝Java開發(fā)工具包7?？梢詫Ρ纫幌聅encha app watch和Compass命令compass watch。Sencha Cmd會監(jiān)視應(yīng)用程序，每當?shù)珕螕舯４娴臅r候，Sencha Cmd就會編譯應(yīng)用程序并編譯Sass樣式表。當改變被檢測到的時候，只會執(zhí)行最低限度的工作，以便更新應(yīng)用程序和CSS，并重新生成Sass。

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

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