如何以不同颜色显示ExtJS窗口

我需要显示一个与默认主题颜色不同的窗口外部窗口。 改变窗户内部的颜色很容易。更改所有弹出窗口的chrome颜色也很容易。改变一扇窗户的镀铬看起来非常困难。正如我所知，您需要复制所有样式（x-window和类似样式），重命名和自定义它们，并设置窗口的BaseCL

---

有更简单的方法吗？

您可以将自己的自定义类添加到窗口中，然后为该类编写CSS规则

查看

Ext.Window

上的

cls

配置选项或

addCls

方法。尝试一下，然后检查应用于窗口的类，找出在哪里应用CSS规则

---

这是我的建议。在ext3.x中，我相信方法是

addClass

。但是配置选项仍然是

cls

（我想）。

很抱歉回答我自己的问题，但我最终找到了一种方法，可以将单个窗口的颜色与其他窗口隔离开来。起初我认为我必须克隆整个x-window类集并修改克隆，但后来我找到了一种更简单的方法

我从中得到了很多帮助，但也使用了大量的尝试错误，因为我的CSS技能很差

您需要克隆和编辑用户使用的背景图像 最重要的css。您需要的文件是top-bottom.png、left-right.png、left-corners.png、right-corners.png和tool-sprites.gif

您要给窗口上色的窗口需要有一个id（“defn_display”，在本章中为“defn_display”） 示例）

将窗口的bodyCls设置为单独的类别，该类别设置背景颜色。例如：

.defn_content 
{
    background: #FFFFDD !important;
}

您需要设置css类选择器来覆盖 使用在步骤1中克隆的新图像，基于此id的x窗口类

#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似乎做到了这一点，但有一个例外：拖动重影很难覆盖，因为它不是窗口的子窗口。因此，在拖动过程中，我仍然会看到一个蓝色的幽灵

---

（使用ExtJs 3.4在FF、Chrome和IE6下进行测试）

检查ui属性。我从未亲自尝试过，但我在Sencha会议上听说这是可能的。祝您好运…

在窗口的配置中

bodyCls: 'popWindow',

然后在css中的某个地方

.popWindow
{
    background-color: blue;
}

---

很酷，但问题是如何最有效地构造CSS。设置一个类很容易，构建CSS使我不必复制每个x-window类是一件痛苦的事情。