Ext JS提供了大量的功能來(lái)使類(lèi)的創(chuàng)建和處理變得簡(jiǎn)單，還提供了一系列的功能來(lái)擴(kuò)展和重新現(xiàn)有的Javascript類(lèi)。這意味著可以為類(lèi)添加行為和創(chuàng)建屬于自己的類(lèi)，或者重寫(xiě)某些函數(shù)的行為。在本文，將展示如何實(shí)現(xiàn)特定主題類(lèi)的重寫(xiě)。

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

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

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

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

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

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

packages > MyTheme > > overrides > > > window > > > > Window.js
文件結(jié)構(gòu)對(duì)應(yīng)了Ext.window.Window的框架文件結(jié)構(gòu)。

下面來(lái)定義類(lèi)：

Ext.define('MyTheme.window.Window', {});
類(lèi)將重寫(xiě)Ext.window.Window：

Ext.define('MyTheme.window.Window', {override : 'Ext.window.Window'});
下面來(lái)測(cè)試一下重寫(xiě)工作。首先，在命令行運(yùn)行以下命令：

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

Ext.define('MyTheme.window.Window', {override : 'Ext.window.Window'}, function(){console.log("Oh yes, my override works!"); });
下面來(lái)創(chuàng)建自定義行為。這里的重寫(xiě)會(huì)在監(jiān)聽(tīng)窗口的beforeshow事件時(shí)添加一個(gè)動(dòng)畫(huà)：

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

requires: ['Ext.fx.Anim'],
下一步，要在beforeshow事件中添加創(chuàng)建動(dòng)畫(huà)的代碼。現(xiàn)在，創(chuàng)建一個(gè)非常簡(jiǎn)單的動(dòng)畫(huà)，在顯示窗口（mywindow）時(shí)將不透明度（opacity）從隱藏平滑的過(guò)渡到100%：

Ext.create('Ext.fx.Anim', {target: mywindow, //argument of the beforeshow eventduration: 1000, //msfrom: {opacity: 0},to: {opacity: 1} });
現(xiàn)在，看可以測(cè)試一下動(dòng)畫(huà)是否能工作了。


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

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}}); }}} });
這里唯一的問(wèn)題是，對(duì)于CSS3動(dòng)畫(huà)，需要使用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的生成過(guò)程中，所以在使用Sencha Cmd生成應(yīng)用程序時(shí)2，Sass樣式表會(huì)自動(dòng)編譯。

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

sencha ant sass
或者

sencha app watch
第一個(gè)命令會(huì)運(yùn)行Apache Ant任何來(lái)編譯一次Sass。第二個(gè)命令功能更強(qiáng)大，不過(guò)它要求下載并安裝Java開(kāi)發(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)畫(huà)已經(jīng)可以在舊和新的瀏覽器中工作了。。

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

轉(zhuǎn)載于:https://www.cnblogs.com/muyuge/p/6333686.html

總結(jié)

以上是生活随笔為你收集整理的【翻译】在Ext JS中创建特定主题的重写的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。