【翻訳】Ext JSの最新テクニック――2014-8-13
原文:Top Support Tips
Greg Barry:新しいフレームワーク、新しいドキュメントタイプ(Doctype)
Ext JS 5では、IE 8+のみがサポートされているため、ユーザーが厳格なHTMLドキュメントタイプを使用することはなくなりました.ここで、HTML 5を使用するドキュメントタイプを推奨し、また、Ext JSがサポートされていないため、metaタグとしてX-UA-Compatibleを使用することを推奨します.次のコード・クリップは、Ext JS 5の理想的なドキュメント・タイプとHEADを示しています.
『Ext JS 5ガイド』の新機能紹介では、この点についてより詳細な情報を入手できます.
Greg Barry:書き換えをよくチェック
書き換えは、フレームワークのソースコードを変更することなく、コアクラスの機能を拡張または変更するのに非常に有用なツールです.Ext JS 4.1は、これらのフレームワークの書き換えを作成するための新しい方法を提供する.Ext JS 4とExt JS 5の基本原則では,新たな声明による書き換えの効果はかなりよい.これらの書き換えは、Sencha Cmdによって作成するoverridesフォルダ内に配置することができ、Cmdはoverridesフォルダ内の書き換えを自動的に含めることができる、例えばExt.gridが使用する場合である.Panelは、overrides/grid/フォルダ内にPanelという名前を作成できます.jsのファイルは、bootstrapがsencha app build、sencha app watch、またはsencha app refreshを介して更新されると、bootstrapに自動的に含まれます.この書き換え方法は,フレームワーク全体の内部コードスタイルで見ることができる.実際の内部書き換えの例としては、トピック、ローカライズ、RTL、その他があります.それでも、Ext JS 3からアプリケーションへの書き換えが新しいフレームワークに適用されることが見られる.これらの書き換えを新しいアプリケーションの価格に適用すると、作成時にタイミングの問題が発生する可能性があります.書き換えを作成するには、次のようにします.
まず、アプリケーションのoverridsフォルダに基づいて適切なネーミングスペースを使用して書き換えを定義します. override構成項目を追加し、書き換えクラスをその値とします.例ではExt.panelを書き換える.Panel. は、書き換える機能を追加し、すべての関連部分を確保する必要があります.現在の例では、close機能を変更してコンソール情報を出力するだけです.パネルを作成してcloseメソッドを呼び出すと、コンソールに「My Change to Close」というメッセージが表示されます. 注意:書き換え方法では、ベースクラスの同名の方法を呼び出す必要がある場合は、thisを呼び出す必要がある.callParentメソッド. はまた、新しい機能を追加することもできる.ご存知のようにExt.panelではパネル内には「ハローワールド」という方法はありません.ただし、これは書き換えることで追加できます.パネルを作成し、パネルを呼び出します.ハローワールドメソッドでは、「ハローワールド」というメッセージが出力されます.
ご覧のように、書き換えは強力で、アプリケーションでフレームワークをカスタマイズするためのツールです.まだExt JS 3方式で書き換えている場合は、彼らを大修理してください.ここでは、定義メカニズムをより多くすることができます.
Don Griffin:callParent()ちょっとアドバイス
callParentは、Ext JSおよびSecha Touchでよく見られるSenchaクラスシステムによって提供されるメソッドであり、ベースクラスの同名メソッドを呼び出すために使用されます.これは、フレームワーククラスから派生し、onRenderのようなメソッドを書き換えるときによく見られます.パラメータ付きメソッドでcallParentメソッドを呼び出す場合、これらのパラメータをベースクラスに渡す方法は2つあります.簡単なargumentsキーワードは、次のコードのように使用できます.
あるいは、これらのパラメータを配列の直接量として明示的に渡すこともできます.
これは区別がないように見えるが,Sencha Cmd 5の新しい最適化を用いてcallParentを最適化すると,性能の改善が顕著になる.最適化が有効になっている場合、この2つの方法は次のコードに最適化されます.
2つ目の場合、最適化はapplyメソッドの代わりにJavascript関数のcallメソッドを使用します.argumentsは使用しないでください.この2つの方法は間違いなく高性能な方法です.事実は,配列直接量の作成をできるだけ避けることを証明している.最適化が有効なコードではパフォーマンスが最も重要であることは明らかであり、argumentsの代わりに表示配列を使用する価値があります.何か問題があれば、フォーラムにアクセスしてください.
Greg Barry:新しいフレームワーク、新しいドキュメントタイプ(Doctype)
Ext JS 5では、IE 8+のみがサポートされているため、ユーザーが厳格なHTMLドキュメントタイプを使用することはなくなりました.ここで、HTML 5を使用するドキュメントタイプを推奨し、また、Ext JSがサポートされていないため、metaタグとしてX-UA-Compatibleを使用することを推奨します.次のコード・クリップは、Ext JS 5の理想的なドキュメント・タイプとHEADを示しています.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>『Ext JS 5ガイド』の新機能紹介では、この点についてより詳細な情報を入手できます.
Greg Barry:書き換えをよくチェック
書き換えは、フレームワークのソースコードを変更することなく、コアクラスの機能を拡張または変更するのに非常に有用なツールです.Ext JS 4.1は、これらのフレームワークの書き換えを作成するための新しい方法を提供する.Ext JS 4とExt JS 5の基本原則では,新たな声明による書き換えの効果はかなりよい.これらの書き換えは、Sencha Cmdによって作成するoverridesフォルダ内に配置することができ、Cmdはoverridesフォルダ内の書き換えを自動的に含めることができる、例えばExt.gridが使用する場合である.Panelは、overrides/grid/フォルダ内にPanelという名前を作成できます.jsのファイルは、bootstrapが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');
}});まず、アプリケーションのoverridsフォルダに基づいて適切なネーミングスペースを使用して書き換えを定義します.
ご覧のように、書き換えは強力で、アプリケーションでフレームワークをカスタマイズするためのツールです.まだExt JS 3方式で書き換えている場合は、彼らを大修理してください.ここでは、定義メカニズムをより多くすることができます.
Don Griffin:callParent()ちょっとアドバイス
callParentは、Ext JSおよびSecha Touchでよく見られるSenchaクラスシステムによって提供されるメソッドであり、ベースクラスの同名メソッドを呼び出すために使用されます.これは、フレームワーククラスから派生し、onRenderのようなメソッドを書き換えるときによく見られます.パラメータ付きメソッドでcallParentメソッドを呼び出す場合、これらのパラメータをベースクラスに渡す方法は2つあります.簡単な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を最適化すると,性能の改善が顕著になる.最適化が有効になっている場合、この2つの方法は次のコードに最適化されます.
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);}2つ目の場合、最適化はapplyメソッドの代わりにJavascript関数のcallメソッドを使用します.argumentsは使用しないでください.この2つの方法は間違いなく高性能な方法です.事実は,配列直接量の作成をできるだけ避けることを証明している.最適化が有効なコードではパフォーマンスが最も重要であることは明らかであり、argumentsの代わりに表示配列を使用する価値があります.何か問題があれば、フォーラムにアクセスしてください.