HOME > 開発者向けBLOG > Sencha Blog >  Top Support Tips – 2014年8月

Technology Note 開発者向けBLOG

Sencha Blog

Top Support Tips – 2014年8月

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

この記事は、US Sencha社ブログ Top Support Tips を翻訳したものです。

New Framework, New Doctype 新しいフレームワーク、新しい Doctype

by Greg Barry

Ext JS 5 では、IE 8 以降をサポートするようになったので、HTML 4 Doctype の Strict モードを利用するように推奨していません。これからは、HTML 5 Doctype を利用するように推奨します。さらに、Ext JS では、”Compatibility Mode” をサポートしないため、X-UA-Compatible Meta タグを使うことを推奨します。

次のコードサンプルは、Ext JS 5 の理想的な doctype と head タグを示しています。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
    </head>

Ext JS の最近の変更について、詳しく知りたい人は、 What’s New in Ext JS 5 guide (日本語訳はこちら) をご覧ください。


オーバーライドの改善

by Greg Barry

オーバーライドは、フレームワークのソースコードを変更せずに、コアのクラスの機能性を変更あるいは拡張するための、とても便利なツールになります。Ext JS 4.1 では、フレームワークにオーバーライドを生成する新しい方法を導入しました。この宣言的なオーバーライドは、Ext JS 4 と Ext JS 5 の基礎な原理とうまく動作します。 これらのオーバーライドは、Sencha Cmd が生成した override フォルダに入れられます。 この override のフォルダによって、Sencha Cmd が自動的にオーバーライドをインクルードする事ができます。 例えば、Ext.grid.Panel を使う場合、overrides/grid/Panel.js ファイルを生成できます。 sencha app buildsencha app watchsencha app refresh などによって、bootstrap がリフレッシュされた後に自動的にインクルードされるようになります。

このオーバーライドの方法は、我々自身のコードスタイルの中でフレームワークの各所で使われています。 内部的なオーバーライドの例としては、テーマ、ローカライゼーション、RTL など、色々あります。

とは言え、まだ、新しいフレームワークを使ったアプリケーションで、Ext JS 3 の古いオーバーライド使われているのを見ることがあります。 これに、新しいアプリケーションのアーキテクチャを適用する時に、タイミングの問題が発生する可能性があります。

おすすめのオーバーライド生成の方法は次のようになります。

Ext.define('MyApp.overrides.panel.Panel', {
    override: 'Ext.panel.Panel',
    close: function() {
        console.log('My Change to Close');
        this.callParent(); // call the original method
    },
    helloWorld: function(){
        console.log('Hello World');
    }
});

さて、シンタックスを検討しましょう:

  1. まずは、アプリケーションの overrides フォルダの適切な名前空間でオーバーライドを定義して下さい。
  2. override コンフィグを追加し、オーバーライドしたいクラスと一致する値を与えて下さい。このサンプルでは、Ext.panel.Panel をオーバーライドしています。
  3. オーバーライドしたい関数を追加して下さい。関係する部分を全て取っておく必要があります。この場合、close 関数を変更して、console.log を追加しているだけです。パネルを生成した後に panel.close() をすると、コンソールに “My Change to Close” メッセージがログされます。
    注:オーバーライドしたメソッドで、ベースクラスのメソッドを含めたオーバーライドされたメソッドを呼び出す必要がある場合、this.callParent() を実行します。
  4. 完全に新しい関数を追加します。ご承知の通り、Ext.panel.Panel には “helloWorld” メソッドはありません。しかし、このオーバーライドによって追加しました。 それで、パネルを生成して panel.helloWorld() を実行すると、”Hello World” メッセージがログされる事になります。

ご覧の通り、アプリケーションのフレームワークをカスタマイズするためには、オーバーライドはとても強力なユーティリティです。あなたのオーバーライドが、Ext JS 3 の方法でフォーマットされていたら、リニューアルする時期になったかもしれません。

define メカニズムについて、詳しくはこちらへ。


callParent() を少し軽くする

by Don Griffin

callParent は、Sencha Class System (Ext JS と Sencha Touch で共通のもの) が提供する、ベースクラスのメソッドを呼び出すためのメソッドです。 この通常の用途は、フレームワーククラスから派生し、onRender などの提供されるメソッドをオーバーライドする時に使います。 パラメータがあるメソッドから、callParent を呼び出す場合、そのパラメータをベースクラスメソッドに送る方法が二つあります。 次のように、arguments キーワードを利用できます。

Ext.define('App.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    onRender: function (parentNode, index) {
        this.callParent(arguments);
    }
});

または、明示的に、この引数を配列リテラルで渡す事もできます。

onRender: function (parentNode, index) {
    this.callParent([ parentNode, index ]);
}

違いは小さく見えるかもしれませんが、Sencha Cmd 5 の callParent の 新しい最適化を利用すると、かなり大きいパフォーマンス改善が現れる可能性があります。optimizer が有効になっている状態では、次のように二つのメソッドは最適化されます。

onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.apply(this, arguments);
}
 
onRender: function (parentNode, index) {
    Ext.panel.Panel.prototype.onRender.call(this, parentNode, index);
}

二番目の場合には、optimizer は、apply の代わりに JavaScript Function で call メソッドを利用できます。さらに、arguments を使わないようにする事ができます。applyarguments はパフォーマンスに悪影響を与える原因としてよく知られています。結果的に、配列リテラルの生成も避ける事になります。もちろん、最適化を有効にするだけでも役立ちますが、パフォーマンスが最も重要とされているコードの場合、引数を明示的な配列に切り替える事にはとても価値があります。

もし質問があったら、フォーラムを訪ねて下さい。

PAGETOP