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のフォールバックを書きたいかもしれません。両方の場合は基礎的な機能変更が目に見えています。では、他のテーマを壊さないようにするにはファイル構造のどこにオーバーライドを作ればいいのでしょう?

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

このファイル構造は 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

1つ目のコマンドはApache Antのタスクを実行してSassを1回コンパイルします。2つ目のコマンドはさらに強力ですが、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/をチェックして参加してください。

PAGE TOP

Copyright © 2006-2014 Xenophy.CO.,LTD All rights Reserved.