SalesforceにExt JSを適用する際のcssの上書きを(多少)防ぐ

Salesforceのヘッダを表示させつつ、VisualforcePage内でExt JSを使おうとしたときに、Ext JSのbuttonとかwindowのcssがSalesforce側のcssで上書きされて、見た目が変わってしまいます。

例えば、Salesforceのextended.cssに定義されている.x-btnがExt JSアプリをビルドしてできたcssを上書きしている模様です。

Ext JSの画面内のコンポーネントが参照するcssのprefixを変更して、cssが上書きされないようにしたい…と思って少し調べてみました。

※1 でも、font-sizeはExt JS側のcssで上書きされちゃう模様なので、これも何とかしたい…

※2 Sencha Forum を参考にしました。ありがとうございます！

---

設定すること

1. component.scss の追記
2. Ext.baseCSSPrefix の変更

---

[1] component.scss への追記

$prefixに上書きしたい文字列を指定します。
例えばabc-x-を指定したい場合は以下の通りです。

$prefix: "abc-x-";

追記した後は、Ext JSをビルドして静的リソースとしてSalesforceにアップします。

---

[2] Ext.baseCSSPrefix の変更

Ext JSを使用するVisualforcePageで、ビルドしたjsファイルをロードする前に

<script type="text/javascript">

var Ext = Ext || {};
Ext.buildSettings = {
  baseCSSPrefix: 'abc-x-'
};

</script>

を追記しておきます。

こうすると、Ext.baseCSSPrefixに'abc-x-'がセットされて、ボタンやウィンドウなどのコンポーネントがExt JSの見た目になりました。

---

追記..

そもそも、

1. VisualforcePageで、showHeader="true"としない
2. iframeで呼び出す

といったことをすれば、もっと良いかもしれません。。（試してないですが）