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

  • 3
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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で呼び出す

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