Edited at

Ext JS の overrides の読込

More than 3 years have passed since last update.

Ext JS では、パッチを当てるなどのために override という機能が備わっています。

対象となるクラスがロードされた後に、override のクラス定義をロードすると、クラス定義自体を書き換えられるというものです。

http://extjs.sunvisor.net/632

そして、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 ディレクトリを配置して、そこに上記のように配置します。