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

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

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

もっと簡単な方法はありますか?

  2  1


ベストアンサー

ウィンドウの構成では…​

bodyCls: 'popWindow',

そして、CSSのどこかに

.popWindow
{
    background-color: blue;
}

4


独自のカスタムクラスをウィンドウに追加し、そのクラスのCSSルールを記述できます。

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

Ext.Windowのドキュメントは次のとおりです。 Ext 3.xでは、メソッドは `addClass`であると信じています。 しかし、configオプションはまだ `cls`でした(私は思う)。

1


私自身の質問に答えてすみませんが、私は最終的に他のウィンドウと分離して単一のウィンドウを着色する方法を考え出しました。 最初は、x-windowのクラスセット全体を複製し、複製を変更する必要があると考えていましたが、それ以来、より簡単な方法を見つけました。

私はこのhttp://www.extjswithrails.com/2010/02/theming-extwindow-in-10-minutes.html[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;
}
  1. Xウィンドウをオーバーライドするには、CSSクラスセレクターを設定する必要があります
    手順1で複製された新しいイメージを使用して、このIDに基づくクラス

#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;
}

CSSは1つの例外を除いてトリックを行うようです。ドラッグゴーストはウィンドウの子ではないため、オーバーライドするのが難しいです。 そのため、ドラッグ中に青い幽霊が出ます。

(FF、Chrome、およびIE6とExtJs 3.4でテスト済み)

1


uiプロパティを確認してください。 私は自分で試したことはありませんでしたが、Senchaカンファレンスでそれが可能であると聞きました。 がんばろう…​

0


タイトルとURLをコピーしました