異なる色でExtJSウィンドウを表示する方法

Question

デフォルトのテーマとは異なる色のウィンドウExt.Windowを表示する必要があります。 ウィンドウの腸の色を変えるのは簡単です。すべてのポップアップウィンドウのクロムの色を変更することも非常に簡単です。 1つのウィンドウのクロムを変更するのは非常に難しいようです。私が知る限り、すべてのスタイル（x-windowなど）をコピーし、名前を変更してカスタマイズし、ウィンドウのbaseClsを設定する必要があります。

これを行う簡単な方法はありますか？

Answer 1

ウィンドウの設定では...

bodyCls: 'popWindow', 

、その後どこかCSSの

.popWindow 
{ 
    background-color: blue; 
} 

Answer 2

独自のカスタムクラスをウィンドウに追加し、そのクラスのCSSルールを書き込むことができます。

cls設定オプションまたはaddClsメソッドをExt.Windowにチェックしてください。それを試してから、あなたのウィンドウに適用されたクラスを調べて、CSSルールを適用する場所を見つけてください。

ここにはdoc for Ext.Windowがあります。 Ext 3.xでは、私は方法がaddClassと信じています。しかし、設定オプションはまだcls（私は思う）だった。

Answer 3

申し訳ありませんが自分の質問に答えるが、私は最終的に他のウィンドウとは別に1つのウィンドウに色付けする方法を工夫しました。最初は、xウィンドウのクラス全体をクローンしてクローンを変更する必要があると思っていましたが、それ以降は簡単な方法でクローンを作成しました。

私はこのlinkから多くの援助を得たが、また私のCSSのスキルが

1. を吸うとあなたが によってオーバーライドCSSを使用した背景画像のクローンを作成して編集する必要がありますトライアルエラーの多くを使用。必要なファイルはtop-bottom.png、left-right.png、left-corners.png、right-corners.png、tool-sprites.gifです。
2. 色を付けるウィンドウには、 id（この の例では 'defn_display'）。

3. ウィンドウのbodyClsを、背景色を設定する別のクラスに設定します。たとえば：

   .defn_content 
   { 
       background: #FFFFDD !important; 
   } 
   

4. あなたは、ステップ1

   #defn_display * .x-window-tc { 
       background-image: url("/static/images/defn-top-bottom.png"); 
   } 
   
   #defn_display * .x-window-ml { 
       background-image: url("/static/images/defn-left-right.png"); 
   } 
   
   #defn_display * .x-window-mr { 
       background-image: url("/static/images/defn-left-right.png"); 
   } 
   
   #defn_display * .x-window-tl { 
       background-image: url("/static/images/defn-left-corners.png"); 
   } 
   
   #defn_display .x-window-tl { 
       background-image: url("/static/images/defn-left-corners.png"); 
   } 
   
   #defn_display * .x-window-bl { 
       background-image: url("/static/images/defn-left-corners.png"); 
   } 
   
   #defn_display * .x-window-tr { 
       background-image: url("/static/images/defn-right-corners.png"); 
   } 
   
   #defn_display * .x-window-br { 
       background-image: url("/static/images/defn-right-corners.png"); 
   } 
   
   #defn_display * .x-window-bc { 
       background-image: url("/static/images/defn-top-bottom.png"); 
   } 
   
   #defn_display .x-tool { 
       background-image: url("/static/images/defn-tool-sprites.gif"); 
   } 
   
   #defn_display * .x-window-header-text { 
       color: #515111; 
   } 
   

にクローン化された新しい画像を使用して、このIDに基づいて のXウィンドウクラスをオーバーライドするCSSクラスセレクタを設定する必要があります

CSSは1つの例外を除いてトリックを行うようです：ドラッグゴーストは、ウィンドウの子ではないのでオーバーライドするのが難しいです。そういうわけで、私は引っ張っている間もまだ青い幽霊を得る。

（ExtJSに3.4とFF、ChromeとIE6の下でテスト済み）

Answer 4

UIプロパティを確認してください。私は自分でそれを試したことはありませんでしたが、Senchaの会議でそれが可能であると聞きました。幸運...