Question

我需要显示一个Ext.Window窗口，其颜色与默认主题的颜色不同。改变窗户内脏的颜色很容易。更改所有弹出窗口的镶边颜色也很容易。改变单个窗口的铬似乎非常困难。我可以告诉你最好，你需要复制所有样式（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

很抱歉回答我自己的问题，但我终于找到了一种方法，可以将一个窗口与其他窗口隔离。最初我以为我将不得不克隆整个x-window类的集合并修改克隆，但我已经找到了一种更简单的方法。

我从这个link得到了很多帮助，但由于我的CSS技能很糟糕，我还使用了很多试验错误

您需要克隆和编辑使用的背景图像最重要的CSS。你需要的文件是top-bottom.png，left-right.png，left-corners.png，right-corners.png和tool-sprites.gif
您想要着色的窗口需要有一个id（'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下测试）

Answer 4

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

如何显示具有不同颜色的ExtJS窗口

4 个答案: