【翻译】在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 
});

packages
> MyTheme
> > overrides
> > > window
> > > > Window.js

下面来定义类：

Ext.define(‘MyTheme.window.Window‘, {
 
});

Ext.define(‘MyTheme.window.Window‘, {
	override : ‘Ext.window.Window‘
 
});

sencha app refresh

Ext.define(‘MyTheme.window.Window‘, {
	override : ‘Ext.window.Window‘
 
}, function(){
    console.log("Oh yes, my override works!");
});

listeners: {
	beforeshow: function(mywindow){
 
    }
}

requires: [‘Ext.fx.Anim‘],

Ext.create(‘Ext.fx.Anim‘, {
    target: mywindow, //argument of the beforeshow event
    duration: 1000, //ms
    from: {
        opacity: 0
    },
    to: {
        opacity: 1
    }
});

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
                    }
                }); 
            }
        }
    }
});

@import "compass/css3/transition";
 
.x-window.x-hide-offsets {
    @include opacity(0);
}
 
.x-window {
    @include single-transition(opacity, 1000ms);
    @include opacity(1);
}

sencha ant sass

sencha app watch

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

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