Posted at

Ext JS 4.2にてビルド後...

More than 5 years have passed since last update.

Ext JS 4.2で、Sencha Cmdでスケルトンを作成後、早い段階でテストでビルドすると、それ以降の開発時に画面のレイアウトが崩れる場合があります。

それは、bootstrap.cssの内容が書き換わってしまうからです。

もとのbootstrap.cssはこんな内容。

@import 'packages/ext-theme-classic/build/resources/ext-theme-classic-all.css';

bootstrap.cssの内容も、そのCSSをインクルードするというものに変わってしまうのです。

一旦ビルドされると、MyApp-all.cssというCSSがbuildの中にできるのですが、必要なCSSしかインクルードされません。

プロジェクトの初期にはあまりコンポーネントを使っていないので、ここに入ってこないCSSは沢山あることになります。

それが原因であとで追加で使うようになったコンポーネントの表示とかが崩れたりするわけです。

途中でビルドをすれば、MyApp-all.cssの内容も更新され、ちゃんと表示されるようになります。

また、bootstrap.cssを前掲の内容に書き戻してやってもレイアウトの崩れは解消されます。