【翻译】在Ext JS中创建特定主题的重写
Ext JS提供了大量的功能来使类的创建和处理变得简单，还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类，或者重写某些函数的行为。在本文，将展示如何实现特定主题类的重写。
原文：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/来参加遍布世界各地的高级主题课程。
