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

时间:2023-12-17 10:42:20

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