0

js プラグイン/css などを使用して既存の HTML テンプレートに埋め込む extjs アプリケーションがあります。

テンプレート スタイルと ext の間で CSS の競合が発生しています。簡単な解決策として、コンポーネントを作成するときに独自のcssファイルのみを使用するようにextに指示できるかどうか疑問に思っています。アプリケーションをロードする前に、次の設定を実装しました。

Ext = { buildSettings:{ "scopeResetCSS": true // ありがとうございます。ただし、独自のスコープを設定してください } };

これはある程度機能しますが、プラグインの css ファイルが特定の ext コンポーネント (フォーム フィールド、配置の問題など) をオーバーライドしています。

ext アプリケーションを html テンプレートに統合しようとしたのはこれが初めてなので、知識はかなり限られています。

前もって感謝します

4

1 に答える 1

0

私の知る限り、単一のページに CSS のスコープを設定する方法はありません。競合を避けたい場合は、リファクタリングを行う必要があると思います。

いくつかのアドバイス:

  • ページに読み込まれた ExtJS ファイルを使用して CSS ルールを作成します。これは、現在、最終的な環境で作業していることを意味します。さらに、独自のリセット ルールを使用できます。
  • 対象の要素が ExtJS コンポーネントをホストしない場合を除き、ExtJS 要素を含むページ内のすべての要素に適用されるタグ セレクター ( div、span、 ...) を使用しないでください。input
  • ExtJS が行うように ( 、 ) #my-id、独自のセレクターに名前空間を追加します( 、)。.my-class.x-button.x-container

もう 1 つの解決策は、ExtJS を iframe でサンドボックス化することですが、それはプロジェクトの性質によって異なります。それ以上に役立つ十分な情報がありません。

于 2013-02-24T08:56:56.060 に答える