2

Extjs 4.2 で新しいプロジェクトを作成しました。テーマを動的に変更するためのオプションを UI に提供したいと考えています。「クラシック」や「グレー」などのテーマ名のコンボ ボックスを作成しました。特定のテーマを選択するたびに。アプリはそのテーマに変換する必要があります。

助けてください。

どうもありがとう

4

2 に答える 2

1

Ext.util.CSS.swapStyleSheet は動作しますが、いくつかの欠点があります:

1. 新しい CSS テーマでページをレンダリングするのにより多くの時間がかかります。
2. テーマを切り替えている間、ページはしばらく CSS から外れます。これにより、ページの見栄えが悪くなります (壊れていて無地です)。
3. 画面に不要なスクロールバーが表示されます。

私はJavascriptの方法を使用してこれらを克服しました..

ここ、

  1. HTML ファイルにすべての CSS ファイルを含めます。

    <link rel="stylesheet" id="theme1" type="text/css" href="../Theme1.css" />
<link rel="stylesheet" id="theme2" type="text/css" href="../Theme2.css" />

  2. デフォルトにするテーマを除いて、すべてのテーマを無効にします。

    document.getElementById('theme1').disabled = true;
document.getElementById('theme2').disabled = false;

    これで、ページに「theme2」がロードされます。

  3. テーマを切り替えたい場合。上記の逆を行います..

    document.getElementById('theme1').disabled = false;
document.getElementById('theme2').disabled = true;

このように、切り替えは非常に高速になります。最初にすべてのcssファイルをロードしたので。サーバーに毎回新しいテーマを要求するわけではありません。

それは私にとって非常にうまくいきました。

于 2014-08-11T10:47:23.900 に答える
1

コンボボックスでハンドラーを取得して、選択したテーマの css をロードするだけです。読み込まれた css の新しいセレクターは、以前のものをオーバーライドし、テーマを更新します。

これを実行する関数Ext.util.CSS.swapStyleSheetもあります。

于 2013-05-16T10:51:04.130 に答える