extjs
共通の落とし穴とベストプラクティス

関心事の分離

悪い

ViewController：

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

表示：

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

より良い

ViewController：

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

表示：

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

説明

この例では、2つのコードスニペットが同じタスクを実行します。しかし、 myhappyfieldへの参照が変化したり、「幸福」を示す方法論が大幅に変化した場合、前者のアプローチでは参照が使用される場所ごとに変更が必要です。

分離された懸念（後者の例）では、ビューは、他のクラスが使用する可能性のある「幸福」を変更する抽象的な方法を提供します。クエリとコンポーネントの操作は1つの場所（ビュー定義自体のすぐ横にあります）に保持され、抽象メソッドへの呼び出しは変更する必要はありません。

コントローラがビューのレイヤーをクエリできるようにすることは可能ですが、その動作をビューのメソッドに抽象化することを強くお勧めします。このようにして、ビューは、他のクラスがそれに影響を与える標準化された方法を提供し、ビューの構造が変更されたときに他のクラスの変更を最小限に抑えたり排除することができます。

拡張を上書きする

オーバーライド：

ファイルを上書きする：

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

アプリで使用する：

{
    xtype: 'textfield'
}

拡張機能：

ファイルを上書きする：

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

アプリで使用する：

{
    xtype: 'cornfield'
}

説明

ExtJSは、既存のクラスの動作を変更する2つの主な方法を提供します：拡張し、それらをオーバーライドします。それぞれには利点と落とし穴があり、それらを使用する前に考慮する必要があります。

クラスを拡張すると、親からその動作と設定を継承する新しいクラスが作成されます。拡張を介して新しいクラスを作成することにより、構成と動作の繰り返しの変更を一箇所で行い、アプリケーション全体で再利用することができます。拡張の最大の利点は、拡張された動作が望ましくない単純なユースケースに対して親クラスがそのまま残っていることです。

拡張機能の有効な使用例としては、特別な振る舞いを持つカスタムフォームフィールド、特殊なモーダル、カスタムコンポーネントなどがあります。

クラスをオーバーライドすると、既存のクラスの動作が変更されます。オーバーライドのコンフィグレーションとメソッドは、親クラスのクラスを完全に置き換え、新しいデフォルトコンフィグレーションとアプリケーション全体での動作を作成します。オーバーライドは、使用の破壊的性質のために控えめに使用する必要があります。拡張されたクラスは、通常、親クラスを妨げずに、同じ利点を提供することができます。

ただし、上書きは、状況によってはメリットをもたらす可能性があります。適切な使用例には、既存のクラスのバグ修正、トークンやセッションデータなどのリクエストに余分な情報を追加するようにプロキシの動作を変更したり、特定の動作をアプリケーション全体のデフォルト動作に強制するなどがあります。

上書きとバグ修正の分離

ExtJSでは、フレームワークのほぼすべてのメソッドをオーバーライドし、独自のフレームワークで置き換えることができます。これにより、ExtJSソースコードを直接変更することなく、既存のクラスを変更することができます。

場合によっては、既存のクラスを拡張したり、クラスに対して正常なデフォルトプロパティを提供することができます。

たとえば、すべてのモデル・データ・フィールドにNULL値を許可することができます。

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

他の場合には、フレームワークで壊れているものを修正する必要があります。

ここでは、ドキュメントによるバグ修正の例を示します。クラス名には、「上書き」ではなく「修正」が含まれています。実際の名前は重要ではありませんが、分離は分かります。

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

今度はExtJSの次のバージョンにアップグレードする時が来たら、削除できるバグの修正を確認する必要がある場所は1つだけです。