2012-02-21 19 views
3

ExtJS 3アプリケーションをExtJS 4にアップグレードすると、一部のコンポーネント(ただしすべてではない)の外観が変更されました。このアプリケーションでは、3つのCSSファイルを使用しています。オリジナルのext-all.cssと、複数の月前に書かれた2つの独自のファイルです。これらの2つのファイルが生成されているように見えるし、アプリケーションの外観を復元するにはExtJS 3から4への移行中にCSSスタイルを維持する

.x-menu-group-item .x-menu-item-icon { 
    background-image: none; 
} 

.x-menu-plain { 
    background-color: #fff !important; 
} 

.x-menu .x-date-picker { 
    border-color: #AFAFAF; 
} 

のようなクラスベースのルールを定義し、私は

    はゼロから独自の2つのファイルを書き換えて
  1. ことができます。
  2. ファイルを保持し、奇妙に見えるコンポーネントの新しいルールを定義します。そうするために、私はFirebugでそれらを手で選んで、多くのCSSクラスのどれを再レイアウトする必要があるかを推測する必要があります。それは数日かかるだろう。
  3. まだわからない新しいテーマのサポートでアプリケーションのスタイルを設定してください。それは時間がかかりすぎる可能性があるため、最後の選択肢になるはずです。また、既存のCSSファイルをSASSでどのように読み込むこともできません。

私のExtJS 4アプリケーションを古いもののように再フォーマットするにはどうすればよいですか?

編集:「スタイル」引数を適用してコードにCSSを記述したくありません。 CSSファイルはスタイリングの面倒を見る必要があります。

答えて

1

結論としては、これを行うにはテーマが正しい方法です。私は、guide-to-custom-themes-in-extjs-4に従って、アプリケーションの最も重要なスタイルを復元することができました。

まもなく私はthisのバグに突き当たり、のように3.1.1にダウングレードすると、それを解決しました。

は、私はちょうどで次の変数を再定義しなければならなかったデザインのほとんどを復元するには、私の-EXT-theme.scss:あなたが見ることができるように

$grundblau: #b9d7ff; 
$panelrandgrau: #D0D0D0; 
$panelgrau: #f1f1f1; 

$base-color: $grundblau; 

$panel-border-color: $panelrandgrau; 
$panel-frame-background-color: $panelgrau; 
$panel-header-color: #333333; 

は、アプリケーションのカスタムデザインは、実際にありますものすごく単純。 :)

関連する問題