【翻译】在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/来参加遍布世界各地的高级主题课程。