Ext JS の overrides の読込

Ext JS では、パッチを当てるなどのために override という機能が備わっています。
対象となるクラスがロードされた後に、override のクラス定義をロードすると、クラス定義自体を書き換えられるというものです。

そして、Sencha Cmd で生成された、プロジェクトには overrides というディレクトリが最初から存在しています。

Sencha Cmd と MVC フレームワークにおいて、override を読み込む正しいやり方は、だれもしらないことの一つです。
今回はその使い方です。

override したいことができたら、Ext.define でオーバーライドを定義して、この overrides ディレクトリに配置します。

Ext.define("App.overrides.Panel", {
    override: "Ext.panel.Panel",
    foo: 42
});

ファイル名はなんでもいいし、クラス名の部分もなんでもいいです。
アプリケーションの中で、オーバーライドの対象となるクラスを使います。
この場合ですと、パネルを使います。

requires: ['Ext.panel.Panel']

そして、app.json に次の1行を足します。

"overrides": "${app.dir}\/overrides",

これをセットしておくと、このフォルダにあるオーバーライドを探しに行ってくれるようになります。
その後、sencha cmd で

sencha app refresh

を実行すると、bootstrap.js が更新されて、オーバーライドが読み込まれるようになります。

Ext JS 6

Ext JS 6 では、overrides ディレクトリの中に、クラス名階層通りのディレクトリを掘って、ファイルを配置します。

Ext.panel.Panel をオーバーライドする場合は、次のようにクラス名部分を指定して、overrides/panel に Panel.js として配置します。

Ext.define("Ext.overrides.panel.Panel", {
    override: "Ext.panel.Panel",
    foo: 42
});

ユニバーサルアプリの場合

ユニバーサルアプリのコンポーネント系のオーバーライドは、ツールキット毎に行います。
modern / classic ディレクトリ直下に overrides ディレクトリを配置して、そこに上記のように配置します。