Top Support Tips – 2014年8月
こんにちは、ゼノフィnakamuraです。
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 build
、sencha app watch
、sencha 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'); } }); |
さて、シンタックスを検討しましょう:
-
まずは、アプリケーションの
overrides
フォルダの適切な名前空間でオーバーライドを定義して下さい。 -
override
コンフィグを追加し、オーバーライドしたいクラスと一致する値を与えて下さい。このサンプルでは、Ext.panel.Panel
をオーバーライドしています。 -
オーバーライドしたい関数を追加して下さい。関係する部分を全て取っておく必要があります。この場合、close 関数を変更して、
console.log
を追加しているだけです。パネルを生成した後に panel.close() をすると、コンソールに “My Change to Close” メッセージがログされます。
注:オーバーライドしたメソッドで、ベースクラスのメソッドを含めたオーバーライドされたメソッドを呼び出す必要がある場合、this.callParent()
を実行します。 -
完全に新しい関数を追加します。ご承知の通り、
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
を使わないようにする事ができます。apply
と arguments
はパフォーマンスに悪影響を与える原因としてよく知られています。結果的に、配列リテラルの生成も避ける事になります。もちろん、最適化を有効にするだけでも役立ちますが、パフォーマンスが最も重要とされているコードの場合、引数を明示的な配列に切り替える事にはとても価値があります。
もし質問があったら、フォーラムを訪ねて下さい。