99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

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

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

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

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

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

下面來創(chuàng)建一個(gè)這樣的javascript備用。這是一個(gè)簡(jiǎn)單的動(dòng)畫，在打開彈出窗口的時(shí)候會(huì)動(dòng)畫處理不透明度。

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

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

文件結(jié)構(gòu)對(duì)應(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'
                                                                                                         
});

下面來測(cè)試一下重寫工作。首先，在命令行運(yùn)行以下命令：

sencha app refresh

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

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

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

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

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

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

下一步，要在beforeshow事件中添加創(chuàng)建動(dòng)畫的代碼。現(xiàn)在，創(chuàng)建一個(gè)非常簡(jiǎn)單的動(dòng)畫，在顯示窗口（mywindow）時(shí)將不透明度（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)在，看可以測(cè)試一下動(dòng)畫是否能工作了。

非常糟糕的是，下面要?jiǎng)?chuàng)建的CSS3動(dòng)畫只支持現(xiàn)代瀏覽器。因此，需要做一個(gè)判斷，只有在IE（IE9或更低）是舊版本的時(shí)候才執(zhí)行這個(gè)Ext JS動(dòng)畫。

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
                    }
                });
            }
        }
    }
});

這里唯一的問題是，對(duì)于CSS3動(dòng)畫，需要使用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)用程序時(shí)2，Sass樣式表會(huì)自動(dòng)編譯。

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

sencha ant sass

或者

sencha app watch

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：【翻譯】在ExtJS中創(chuàng)建特定主題的重寫-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.ef60e0e.cn/article/dpcpjh.html