HOME > 開発者向けBLOG > Sencha Blog >  Ext JSで特定のテーマでのオーバーライドを生成する

Technology Note 開発者向けBLOG

Sencha Blog

Ext JSで特定のテーマでのオーバーライドを生成する

こんにちは、ゼノフィnakamuraです。

この記事は、US Sencha社ブログ Creating Theme-Specific Overrides in Ext JS を翻訳したものです。

Ext JSはクラスを簡単に生成して、扱うための関数をいくつか提供しています。また、既存のJavaScriptクラスをオーバーライドしたり継承する関数も提供しています。これは動作を追加したり、独自のクラスの作成したり、いくつかの関数の動作をオーバーライドすることが可能であることを意味します。この記事では、特定のテーマでのクラスのオーバーライドを使用する方法について説明します。

おそらく、Ext JSクラスのオーバーライドの方法はすでにご存知でしょう。例えばデフォルトの動作の変更やフレームワークを修正したいとします。その場合は次のコードを利用してクラスオーバーライドを生成します。 

1
2
3
4
5
6

Ext.define('SomeClassName', {
    override : 'Ext.panel.Panel',
 
    //the override: by default, all panels will have a 200px width
    width : 200
});

最初に浮かび上がる疑問は、オーバーライドクラスの名前を何にするのか、そしてどこに設置すればいいのかでしょう。ここでは特定のテーマでのクラスのオーバーライドを生成します。JavaScript　のオーバーライドはカスタムテーマにバンドルされていると理想的ではないでしょうか？ 例えば、あなたのカスタムテーマでは、全てのパネルにbox-shadowが必要であったり、ポップアップウィンドウを開く度に、素晴らしいCSS3アニメーションを生成したいかもしれません。 古いバージョンのInternet ExplorerはCSS3を扱えないため、JavaScriptのフォールバックを書きたいかもしれません。両方の場合は基礎的な機能変更が目に見えています。では、他のテーマを壊さないようにするにはファイル構造のどこにオーバーライドを作ればいいのでしょう？

秘訣はoverridesフォルダです。 Sencha Cmd 3.1では、applications と packages の overridesフォルダにクラスオーバーライドを保存することが可能です。テーマのパッケージを生成すると、デフォルトでこのようなフォルダが含まれていて、オーバーライドに対応できるようになっています。

JavaScriptフォールバックを生成しましょう。ポップアップウィンドウを開く時に簡単な透明度のアニメーションを行います。

): テーマパッケージで次のファイル構造を作成して下さい（このパッケージの名称はMyThemeにしましょう）： 

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

このファイル構造は Ext.window.Window のフレームワークのファイル構造をマッピングします。

次のクラスを定義しましょう： 

1
2
3

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

このクラスはExt.window.Windowをオーバーライドします： 

1
2
3
4

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

このオーバーライドが動作するかテストしましょう。まずはコマンドラインから次を実行しましょう： 

sencha app refresh

この時点でコードはまだ機能を変更していません。クラスが生成された時点でコンソールログを出力して、ブラウザでテストしましょう： 

1
2
3
4
5
6

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

カスタム動作を作成しましょう。このオーバーライドはウィンドウのbeforeshowリスナーにアニメーションを追加します： 

1
2
3
4
5

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

beforeshowリスナーは新しいアニメーション（Ext.fx.Anim）を生成しますので、まずはクラスにアニメーションが必要となります： 

1

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

次はbeforeshowイベントでアニメーションを生成するコードを組み込みましょう。今の時点では、ウィンドウ（mywindow）のopacityを不可視から100%可視にスムーズに表示するシンプルなアニメーションを生成します： 

1
2
3
4
5
6
7
8
9
10

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

さて、アニメーションが動作するかテストできます。

さらに、モダンブラウザ用のCSS3アニメーションも生成しましょう。そして、ブラウザがInternet Explorerの古いバージョン（IE9以下）の場合に実行するようにチェックにExt JSアニメーションをラッピングしましょう： 

1
2
3

if(Ext.isIE9m) {
 
}

あなたのコードが下のようになっていることを確認して下さい： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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を利用します。

テーマパッケージでは、次のsassコードをpackages/mytheme/sass/src/window/window.scssに追加できます。下記のコードはJavaScriptファイルにコードしたのと同じアニメーションを表示します： 

1
2
3
4
5
6
7
8
9
10

@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 Cmdでアプリケーションを作成している時にSassスタイルシートは自動的にコンパイルされます。

現時点では、アプリケーションすべてをビルドする必要はないが、ただスタイルシートだけコンパイルしてアニメーションをテストしたいことがあります。これは次のコマンドのいずれかをコマンドラインから実行すれば可能です： 

sencha ant sass

または 

sencha app watch

１つ目のコマンドはApache Antのタスクを実行してSassを１回コンパイルします。２つ目のコマンドはさらに強力ですが、Java Development Kit 7をダウンロードしてインストールする必要があります。sencha app watchをCompassコマンド”compass watch”を比較することができます。：Sencha Cmdは保存する度にアプリケーションを監視して、アプリケーションのビルドとSassスタイルシートのコンパイルを行います。変更が検出されたら、Sassをリビルドする必要を無くすために、アプリケーションとCSSが最新版になるように最低限の作業を行います。

完成です。古いブラウザでも新しいブラウザでもアニメーションが動作します。

もし他の上級なExt JSテーマの技術を習得したいなら、我々のAdvanced Theming Ext JS コースを受講してください。Thema331の高度なテーマ設定の授業に参加するには、世界中にあるクラス、またはオンラインクラス http://www.sencha.com/training/をチェックして参加してください。

<

>

PAGETOP