Ext

【翻訳】ExtJS5のウィジェットを理解する



Translation Understanding Widgets Ext Js 5



元の： Ext JS5のウィジェットを理解する




Ext JS 5では、グリッドセルへのコンポーネントの配置をサポートするために新しい「widgetcolumn」が導入されました。同時に、「ウィジェット」と呼ばれる新しい軽量コンポーネントがExt JS5に導入されました。ExtJS5には、いくつかのウィジェットが含まれています。この記事では、独自のウィジェットを簡単に作成する方法を紹介します。

重要な概念を説明するために、次の図に示すような「評価」という名前の単純なウィジェットが作成されます。





入門

Ext.Componentから派生した一般的に使用されるコンポーネントとは異なり、ウィジェットは新しい基本クラスExt.Widgetから派生します。さらに、Ext.Widgetの派生クラスは、構成システムによってほぼ完全に定義されます（後で説明します）。 Ext.Widgetは、DOM要素が生成されてDOMイベントに接続される方法も定義します。




レンダリング

ウィジェットの場合、最初に考慮すべきことは、そのDOMツリーを定義する方法です。一般的な方法は、次のコードのようにクラスの要素属性を指定することです。

Ext.define('Ext.ux.rating.Picker', { extend: 'Ext.Widget', //... element: { cls: 'ux-rating-picker', reference: 'element', children: [{ reference: 'innerEl', cls: 'ux-rating-picker-inner', listeners: { click: 'onClick', mousemove: 'onMouseMove', mouseenter: 'onMouseEnter', mouseleave: 'onMouseLeave' }, children: [{ reference: 'valueEl', cls: 'ux-rating-picker-value' },{ reference: 'trackerEl', cls: 'ux-rating-picker-tracker' }] }] }, //... })
オブジェクト要素は、DOM要素を作成するためのExt.dom.Helper仕様に基づいています。主な新機能は、参照属性とリスナー属性です。これらの名前はViewControllerで一般的であり、ウィジェットでも同様のことを行います。 Ext.Widgetでは、すべての要素の参照属性が、名前を属性値としてウィジェットインスタンスにキャッシュされます（例：element、innerElなど）。

イベント

上記の要素では、listenersオブジェクトもinnerElオブジェクトで定義されています。これらのリスナーは、仕様ブロックから生成された要素にアタッチされます。このメソッドは、名前に基づいてウィジェットクラスを検索します。次に例を示します。

Ext.define('Ext.ux.rating.Picker', { extend: 'Ext.Widget', //... onClick: function (event) { var value = this.valueFromEvent(event) this.setValue(value) }, onMouseEnter: function () { this.element.addCls(this.overCls) }, onMouseLeave: function () { this.element.removeCls(this.overCls) }, onMouseMove: function (event) { var value = this.valueFromEvent(event) this.setTrackingValue(value) },
これは従来のコンポーネントクラスの記述に少し似ていますが、明らかなことは初期化コードとクリーンアップコードがないことです。 Ext.Widgetのコンストラクターは、要素の作成を処理し、それらの参照を追跡し、リスニングを設定します。これらのアクション（および対応する破棄方法）に加えて、Ext.Widgetには追加のライフサイクルや関連するオーバーヘッドはありません。

別の方法として、派生クラスは、システムによって提供されるconfig属性を構成することによってその動作を定義できます。構成システムを理解していない方のために、以下に簡単に紹介します。

システム101の構成

Ext JSのコアコンセプトの1つは、「config」属性のコンセプトです。これらは最初からExtJSの一部であり、Ext JS 5（またはSencha Touch 2.x）だけでなく、フレームワークによってこれらの属性のメカニズムが標準化されています。一般的な構成は次のように宣言されます。

Ext.define('Ext.ux.rating.Picker', { //... config: { family: 'monospace' } //... })
上記のステートメントは、次の手書きコードと同等です。Ext.define('Ext.ux.rating.Picker', { //... getFamily: function () { return this._family }, setFamily: function (newValue) { var oldValue = this._family if (this.applyTitle) { newValue = this.applyFamily(newValue, oldValue) // #1 if (newValue === undefined) { return this } } if (newValue !== oldValue) { this._family = newValue if (this.updateFamily) { this.updateFamily(newValue, oldValue) // #2 } } return this }, //... })
この自動処理には、主に次の重要な利点があります。

  • クリア：コードが少なく、クラスが読みやすい
  • 一貫性：すべての構成の動作は同じです
  • 柔軟性：正しく実装されている場合、構成プロパティは作成時だけでなくいつでも変更できます（Ext JSの多くの古い構成プロパティの一般的な制限）


開発者は、family、applyFamily、updateFamily（上記のコードの＃1と＃2）など、任意の属性に2つのキーメソッドとオプションのメソッドを提供できます。これらのメソッドは、ほとんどの場合、getまたはsetメソッドではなく、オーバーライドされます。

申請方法（申請者）

アプリケーションメソッドは、開発者を実行して、受信した値を保存された実際の値に変換します。多くのアプリケーションメソッドでは、これは受信した構成オブジェクトに基づいて一部のクラスのインスタンスを作成することを意味する場合があります。または、アプリケーションメソッドが内部表現を1つの場所で標準化して、属性が検査に使用されるすべての場所でそれを回避する場合があります。

更新方法（アップデーター）

構成プロパティの値が変更されると、updateメソッドが呼び出されます。 updateメソッドの目的は、古い値を新しい値に変換することです。

initConfig-ピギーバック


最後に、構成システムにクラスを追加するには、特定の時点でinitConfigメソッドを呼び出す必要があります。 Ext.Widgetでは、コンストラクターで実行されます。メソッドinitConfigは、configオブジェクトを受け取り、その各属性を処理して、クラス内のこれらの宣言がset、apply、およびupdateメソッドを適切に呼び出すことができるようにします。

このメソッドは、構成プロパティのシーケンスを解決するための「ジャストインタイム」設定メカニズムも提供します。たとえば、構成プロパティの更新メソッドが別の構成プロパティの値を必要とする場合、構成プロパティの別のGetメソッドを呼び出します。下部にあるinitConfigは、要求された属性によって返される結果に従って、set / apply / updateメソッドを正しい順序で呼び出します。

最適化のためにcachedConfigを使用する

ウィジェットの場合、DOMを維持するために多くの構成が必要になる場合があります。特定のウィジェットインスタンスがすべてのデフォルト構成値をオーバーライドする可能性は低いため、これらのデフォルト値をキャッシュして処理できると理想的です。これらの構成では、クラスに次の変更を加えることができます。


Ext.define('Ext.panel.Panel', { //... cachedConfig: { family: 'monospace' } //... })
ほとんどの場合、これらの構成は一般的に使用される構成と同じです。ただし、これらの構成をキャッシュする場合、構成システムは、クラスが最初のインスタンスを作成するときに追加の処理を実行します。

最初のインスタンス化


最初のインスタンスの構成オブジェクトが処理される前に、構成システムはクラスのデフォルト値からのみ初期化されます。このプロセスは、さまざまな適用メソッドと更新メソッドを呼び出します。これらのメソッドは、要素の仕様に従ってDOM要素の初期生成を更新します。

次の更新方法が付属するファミリ構成について考えてみます。

updateFamily: function (family) { this.element.setStyle('fontFamily', ''' + family + ''') },
すべての更新メソッドは、ウィジェットのDOMのデフォルト状態を設定するのに役立ちます。構成がデフォルト値に設定されると、afterCachedConfigメソッドが呼び出されます。このメソッドは、最初にインスタンス化されたときにのみ機能します。 Ext.Widgetは、結果のDOMツリーを（cloneNode（true）DOM APIを使用して）深く複製します。

2番目の例（およびそれ以降）


同じウィジェットクラスの別のインスタンスを作成する場合、Ext.WidgetはキャッシュされたDOMツリーのクローンを使用し、それを深く複製してパフォーマンスウィジェットのDOMツリーを作成します。これにより、要素仕様の再処理とデフォルト値の更新メソッドの実行のオーバーヘッドが回避されます。構成の更新メソッドが正しく記述されている場合、プロセスはほぼ透過的です。

もちろん、Ext.Widgetには、要素参照の取得、リスナーのカプセル化、インスタンスへのデフォルト以外の構成プロパティの設定など、DOMツリーをコピーした後に実行する作業がいくつかあります。ただし、現時点でのオーバーヘッドは、クラスの構成プロパティではなく、インスタンスに割り当てられた構成値の数に直接関係しています。

再利用、リサイクル


単一のウィジェットを作成して初期化する方法を調べてみましょう。 widgetcolumnでウィジェットを使用することに関連するいくつかの重要な概念があります。

インスタンスの作成を制限することが常に焦点であるため、バッファリングされたレンダリングが重要です。この方法では、グリッドは記録されたウィジェットよりもはるかに少ないウィジェットをレンダリングし、行がスクロール領域から移動した「後」および新しい行がレンダリングされる「前」にリサイクルする必要があります。

これらの遷移が発生すると、widgetcolumnはDOM内のウィジェットを新しい行に移動し、dataIndexを介して対応するレコードからフィールドデータを読み取り、ウィジェットのsetConfigを呼び出してdefaultBindプロパティを設定します。これにより、applyおよびupdateメソッドが呼び出されます。エンコーディングが正しい限り、ウィジェットを再構成して新しいフィールド値を表示できるようになりました。

現在の例のウィジェットでは、編集可能な値のみを表すため、updateValueメソッドをチェックインして、ウィジェットがグリッドセルで使用されているかどうかを確認する必要があります。

column = me.getWidgetColumn && me.getWidgetColumn() record = column && me.getWidgetRecord && me.getWidgetRecord() if (record && column.dataIndex) { record.set(column.dataIndex, value) }

getWidgetColumnメソッドとgetWidgetRecordメソッドは、widgetcolumnを介してウィジェットに配置されるため、グリッド内のコンテキストを認識します。

概要


ウィジェットの説明のほとんどはグリッドに関連していますが、ウィジェットは従来のウィジェットがどこにある場合でも使用できます。 Ext JS5でのミニウィジェットとしてのスコアリングウィジェットの導入が事実になりました。

以下は、サンプルアプリケーションのメインパネルのスクリーンショットで、items配列の4つのインスタンスを示しています。




上記に精通している場合は、SenchaTouchモードをすでに知っていると推定されます。これらはExtJS 5の拡張機能ですが、Ext.Widgetは基本的にSenchaTouchに元々あったExt.AbstractComponentの最後のバージョンです。

したがって、コンポーネントの代わりにウィジェットを使用しますか？多くの点で、ウィジェットの作成はコンポーネントの作成よりも簡単です。これは、CSSのみを使用してレイアウト要件を処理する場合に特に当てはまります。さらに、Senchaモバイルフレームワークとデスクトップフレームワークを引き続き組み合わせているため、ウィジェットは将来的に国境を越える可能性があります。

新しいウィジェットはここにあります 完全なコード と 例 。それを楽しんで、あなたの考えを私たちに知らせてください。

著者：ドン・グリフィン
Don Griffinは、ExtJSコアチームのメンバーです。彼はSenchaに入社する前に2年間ExtJSユーザーであり、幅広いプラットフォームで20年以上のソフトウェアエンジニアリングの経験があります。彼の経験には、Webアプリケーションのフロントエンドとバックエンド、ネイティブGUIアプリケーション、ネットワークプロトコル、およびデバイスドライバーの設計が含まれます。ドンの情熱は、人々が愛用する世界クラスの製品を作ることです。



転載：https：//www.cnblogs.com/muyuge/p/6333651.html