【翻译】在Ext JS中创建特定主题的重写

Ext JS提供了大量的功能来使类的创建和处理变得简单,还提供了一系列的功能来扩展和重新现有的Javascript类。这意味着可以为类添加行为和创建属于自己的类,或者重写某些函数的行为。在本文,将展示如何实现特定主题类的重写。



作者: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/来参加遍布世界各地的高级主题课程。



【翻译】在Ext JS中创建特定主题的重写

原文:http://blog.csdn.net/tianxiaode/article/details/19620313

上一篇:P3868 [TJOI2009]猜数字


下一篇:学习javaWeb之Servlet——Filter