👩🏻‍🔬 🎒 ♾ ExtJS-コンポーネントを正しく書くことを学ぶ 🕵🏾 👆🏿 🤧

ExtJSでカスタムコンポーネントを作成する問題に関する短い記事シリーズを開きたいと思います。それらの中で、この分野での経験をHabr読者と共有し、このプロセスのすべての微妙な点、常に注意すべきこと、初心者プログラマーを待っている間違い、およびそれらを回避する方法を詳しく説明します。

遅かれ早かれ、標準ExtJSコンポーネントが開発者のニーズを満たすことができなくなるときが来ます。または、アプリケーションのリファクタリングのプロセスで、インターフェイスの一部（いくつかのコンポーネント、フォーム、テーブル、タブ）を別のコンポーネントに移動する必要が生じます。どちらの場合も、カスタムコンポーネントの作成に頼らなければなりません。

このプロセスの基本は何度も議論され、説明されてきました。私はそれらを描くことはしませんが、それらを模式的に描くことにします。

- –-> Ext.extend –-> xtype Ext.reg

しかし、見かけのシンプルさの背後には多くのニュアンスが隠されています。まず、適切な祖先を選択する方法は？初心者の開発者は次のアプローチを使用します-継承されたコンポーネントを選択するので、結果として可能な限り少ないコードを作成し、知っている構造のフレームワーク内でのみ記述します。それらはonRenderによっておびえ、要素を作成し、イベントハンドラをハングさせます。特定のケースでは、このアプローチは確かに正しいものであり、そのシンプルさを正当化することは認めません。隣にボタンのあるフィールドが必要です-Ext.form.TriggerFieldを継承し、ドロップダウンリストのフィールドが必要です-Ext.from.Comboboxを継承し、ビジュアルエディタでビルドする必要があります-Ext.form.TextAreaを継承します。しかし、継承されたコンポーネントの選択を慎重かつ慎重に実行する必要がある、非常に「偶発的な」状況もあります。

次の実用的な例を考えてみましょう。ビデオギャラリーがある1つのサイトの管理パネルの場合、クリップの長さを入力するコントロールを作成する必要がありました。 1行に3つの入力フィールド（時間、分、秒）が含まれ、単一の入力/出力（setValue / getValueメソッド）が含まれている必要があります。

1年半前、私がまだExtJS開発の初心者だったとき、この問題を次のように解決しました。

Ext.Panelからコンポーネントを継承します
ColumnLayoutを使用すると、3つの列に3つのフィールドが表示されます
this.items.items [0] .items.items [0] .getValue（）などの猛烈なコンストラクトを介してフィールドにアクセスし、getValue / setValueメソッドを作成します。

はい、コンポーネントは動作し、値を指定/設定します。確かに、彼のコードはひどくく、getValue（）メソッドは常にフィールドにアクセスし、合計時間を再カウントします（フィールドの値が変更されていなくても）。しかし、これはそれほど悪くはありません。将来、フォームを検証するか、フォームをシリアル化/ロードするメソッド（getValues / setValues、loadRecord / updateRecord）を使用する必要がある場合、必然的に問題が発生します。フォームは、コンポーネント自体の存在を単に「忘れる」だけであり、コンポーネントをフィールドとして永続的に認識しません。その結果、コンポーネントをフォームフィールドとして機能させるために、Ext.form.Fieldからコードをコピーアンドペーストして、たくさんの「クランチ」を作成する必要があります。

したがって、現時点では、次の原則に従います。フォームフィールドとして機能し、シリアル化および検証プロセスに参加する必要があるコンポーネントは 、 Ext.form.Fieldまたはその子孫から排他的に継承される必要があります。

まず、Ext.form.Fieldを継承して新しいコンポーネントを作成します。

Ext.ux.TimeField = Ext.extend（Ext.form.Field、{
}）;
Ext.reg（ 'admintimefield' 、Ext.Admin.TimeField）;
*このソースコードは、ソースコードハイライターで強調表示されました。

各フォームフィールドは、デフォルトで独自の要素をレンダリングします。標準フォームコンポーネントフィールドでは、これは入力フィールドまたはチェックボックスのいずれかです。入力フィールド要素は、レンダリング後にelプロパティに保存されます。また、コンポーネントコンテナのサイズが変更されると、自動的にサイズ変更されます。

コンポーネントには3つのフィールドが含まれているため、3つのフィールドとそのラベルが「ラップ」されるdivをデフォルト要素として作成します。要素のタグとプロパティをデフォルトで変更するには、defaultAutoCreateプロパティを事前定義します。

Ext.ux.TimeField = Ext.extend（Ext.form.Field、{
defaultAutoCreate：{tag： 'div' 、 'class' ： 'time-field-wrap' }、
.................................................. ...............
*このソースコードは、ソースコードハイライターで強調表示されました。

これで、入力フィールドの内部構造（「フレーム」）を作成できます。 6つのdivを連続して配置します。それらのうち3つは、スピナーコントロール（時間と分と秒の入力用）のコンテナーになり、他の3つには対応するラベルが含まれます。明確にするために、Ext.DomHelperではなく、Ext.XTemplateテンプレートエンジンを使用して作成します。すべてのユーザーレンダラーは、親メソッドを呼び出した後、継承されたonRenderメソッドに配置されます。

Ext.Admin.TimeField = Ext.extend（Ext.form.Field、{
timeFieldTpl：新しい Ext.XTemplate（
'<div class = "hours-ct"> </ div> <div class = "timeunittext-ct"> h </ div>' 、
'<div class = "minutes-ct"> </ div> <div class = "timeunittext-ct"> m </ div>' 、
'<div class = "seconds-ct"> </ div> <div class = "timeunittext-ct"> with </ div>'
）、
.................................................. ...............
onRender：関数（ct、位置）{
Ext.Admin.TimeField.superclass.onRender.call（ this 、ct、position）;
this .el.update（ this .timeFieldTpl.apply（ this ））;
.................................................. ...............
*このソースコードは、ソースコードハイライターで強調表示されました。

コンポーネントの「フレーム」が必要な場所に配置されるように、次のcssテーブルを1行で記述して接続します。

div.hours-ct、
div.minutes-ct、
div.seconds-ct、
div.timeunittext-ct {
表示：インラインブロック。
幅：10px;
}
div.hours-ct、
div.minutes-ct、
div.seconds-ct {
幅：50px;
}
*このソースコードは、ソースコードハイライターで強調表示されました。

実装を簡単にするために、固定フィールドサイズ（50ピクセル）を使用しました。

コンポーネントのワイヤフレームの準備ができました。レンダリング手順を完了するには、フィールドのコンポーネントを作成して表示するだけです。まず、Ext.queryを使用して、コンテナのDOM要素を見つけ、次にコンポーネントのインスタンスを作成して、適切なコンテナにレンダリングするように指示します。

onRender：関数（ct、位置）{
Ext.Admin.TimeField.superclass.onRender.call（ this 、ct、position）;
this .el.update（ this .timeFieldTpl.apply（ this ））;
Ext.each（[ 'hours' 、 'minutes' 、 'seconds' ]、 function （i）{
this [i + 'Ct' ] = Ext.query（ '。' + i + '-ct' 、 this .el.dom）[0];
this [i + 'Field' ] = Ext.create（{
xtype： 'spinnerfield' 、
minValue：0、
maxValue：i == 'hours' ？ 23:05、
renderTo：この [i + 'Ct' ]、
幅：45、
値：0
}）;
}、 this ）;
.................................................. ...............
*このソースコードは、ソースコードハイライターで強調表示されました。

レンダリング後のコンポーネント自体はthis.xxxFieldのプロパティに格納されているため、（上記のいくつかの段落で説明したような激しい構成の代わりに）簡単かつ便利にアクセスできます。

コンポーネントの視覚部分は準備ができています。機能を完了するために残っています-getValue / setValueメソッドと検証/シリアル化のサポート。

getValueメソッドが毎秒の秒数を再カウントしないように、次の手順を実行します。

秒はvalueプロパティに保存されます
入力フィールドの値を変更した場合にのみ、このプロパティは再計算および更新されます
getValueメソッドは、単にvalueプロパティの値を返します

コンポーネントにメソッドを追加する

.................................................. ...............
getValue： function （）{
この .valueを返します。
}、
getRawValue： function （）{
この .valueを返します。
}、
onTimeFieldsChanged： function （）{
this .value = this .hoursField.getValue（）* 3600 + this .minutesField.getValue（）* 60 + this .secondsField.getValue（）;
this .fireEvent（ 'change' 、 this 、 this .value）;
}、
.................................................. ...............
*このソースコードは、ソースコードハイライターで強調表示されました。

そして、入力フィールドを作成するとき、可能性のあるすべての変更イベントのハンドラーによってonTimeFieldsChangedを設定します。

.................................................. ...............
this [i + 'Field' ] = Ext.create（{
xtype： 'spinnerfield' 、
minValue：0、
maxValue：i == 'hours' ？ 23:05、
renderTo：この [i + 'Ct' ]、
幅：45、
値：0、
enableKeyEvents： true 、
リスナー：{
キーアップ： this .onTimeFieldsChanged、
スピンアップ： this .onTimeFieldsChanged、
spindown： this .onTimeFieldsChanged、
スコープ：これ
}
.................................................. ...............
*このソースコードは、ソースコードハイライターで強調表示されました。

ご覧のとおり、値を更新するときに、入力フィールドから受け取った変更イベントも中継します。これは、検証をサポートするためにまだ役立ちます。

値を設定するには、setValueメソッドを記述します。以前はサードパーティの開発者からの多くのカスタムコンポーネントを使用していましたが、そのほとんどの実装で同じ不具合を修正する必要がありました。 開発者はこれをチェックするのを忘れ、すぐにthis.elプロパティ（まだ作成されていない）を使用しました。 コンポーネントでは、これを考慮し、作成中に指定されていない場合は、さらに値をゼロに初期化します。

.................................................. ...............
initComponent： function （）{
if （！Ext.isDefined（ this .value）） this .value = 0;
Ext.Admin.TimeField.superclass.initComponent.call（ this ）;
}、
setValue：関数（v）{
var setFn = function （v）{
var h = Math.floor（v / 3600）、
m = Math.floor（（v％3600）/ 60）、
s = v％60;
this .hoursField.setValue（h）;
this .minutesField.setValue（m）;
this .secondsField.setValue（s）;
};
this .value = v;
if （ this .rendered）{
setFn.call（ this 、v）;
} else {
this .on（ 'afterrender' 、setFn.createDelegate（ this 、[v]）、{single： true }）;
}
}、
.................................................. ............... <
*このソースコードは、ソースコードハイライターで強調表示されました。

ご覧のとおり、レンダリング前にコンポーネントの値を設定しようとすると、this.valueプロパティにのみ保存され、コンポーネントが最終的にレンダリングされるまで、入力フィールドで必要な値の実際の置換が遅延します（ワンタイムアフターレンダーイベントハンドラーを設定することにより）

そして、コンポーネントに「プレゼンテーション」を提供するために、検証とシリアル化の面倒を見るだけです。

検証を実装するために、Ext.from.Fieldの標準的な方法、つまり：

フィールドが再検証（変更）されるイベントを示します
initEventsで必要なイベントの検証監視を設定します
validateValueメソッドをオーバーライドします
CSSに変更を加える

................................................
validationEvent： 'change' 、
................................................
initEvents： function （）{
Ext.ux.TimeField.superclass.initEvents.call（ this ）;
if （ this .validationEvent！== false && this .validationEvent！= 'blur' ）{
this .mon（ this 、 this .validationEvent、 this .validate、 this 、{buffer： this .validationDelay}）;
}
}、
................................................
validateValue：関数（値）{
if （ this .allowBlank！== false ）{
trueを返します。
} else {
if （Ext.isDefined（value）&& value！= '' && value！= '0' && value> 0）{
this .clearInvalid（）;
trueを返します。
} else {
this .markInvalid（ this .blankText）;
falseを返します。
}
}
}、
*このソースコードは、ソースコードハイライターで強調表示されました。

.time-field-wrap.x-form-invalid {
背景：なし;
border：0px none;
}
.time-field-wrap.x-form-invalid .x-form-text {
背景色：#FFFFFF;
background-image：url（../../ resources / images / default /grid/invalid_line.gif）;
バックグラウンド位置：左下。
ボーダーカラー：＃CC3300;
}
*このソースコードは、ソースコードハイライターで強調表示されました。

イベントを監視する場合、バッファリングが適用されます。 this.validationDelay（デフォルトは250）ミリ秒よりも速く値を変更すると、1回のハンドラー呼び出しのみが発生します（シリーズの最後のイベントで）。これは、検証イベントを監視するための標準的なアプローチであり、すべてのコンポーネントで使用されます。

通常、コンポーネントをシリアル化するには、トリックを行う必要があります。現時点では、値の読み込みは正常であり、get / setValueメソッドは問題なく機能します。ただし、シリアル化中に、単一の値の代わりに、秒数で一度に3つの値が与えられます。これは、標準送信との互換性に基づいて、getValueメソッドにアクセスすることによってフォームがシリアル化されず、レンダリングされたHTMLコードからフォーム要素（<input、<textareaなど）を選択し、値のプロパティ。したがって、コンポーネントの値を変更した場合は、非表示フィールドを作成および更新する必要があります。ところで、同じアプローチがExt.form.Comboboxの実装で使用されます

var setFn = function （v）{
.................................................. ..............
this .hiddenField.value = v;
};
.................................................. ..
onTimeFieldsChanged： function （）{
.................................................. ............................
this .hiddenField.value = this .value;
this .fireEvent（ 'change' 、 this 、 this .value）;
}、
onRender：関数（ct、位置）{
Ext.ux.TimeField.superclass.onRender.call（ this 、ct、position）;
.................................................. .................................................. ........
this .hiddenField = this .el.insertSibling（{
タグ： 'input' 、
タイプ： 'hidden' 、
名前：この .name || この .id、
id：（ this .id + 'hidden' ）
}、 'before' 、 true ）;
if （ this .value） this .setValue（ this .value）;
}
*このソースコードは、ソースコードハイライターで強調表示されました。

以上です。ご覧のとおり、Ext.form.Fieldを継承して非標準コンポーネントを作成することは、一見すると思えるほど難しい作業ではありません。作成したコンポーネントは、わずか99行のコードに収まります。

リンク（ExtJS配布キットなしの代替リンク）を使用してサンプルアーカイブをダウンロードできます。デモはこちらをご覧ください。

ExtJS-コンポーネントを正しく書くことを学ぶ

More articles: