ExtJS 4 - 为 window.MessageBox 设置样式答案

【问题标题】：ExtJS 4 - Styling a window.MessageBoxExtJS 4 - 为 window.MessageBox 设置样式
【发布时间】：2014-11-16 05:07:31
【问题描述】：

我正在构建一个 Web 应用程序，我有一个这样的弹出窗口：

var myMsgBox = new Ext.window.MessageBox({
    cls: 'msgbox',
    bodyCls: 'popWindow'
});
myMsgBox.textField.inputType = 'password';
myMsgBox.textField.width = 240;
myMsgBox.textField.center();
myMsgBox.prompt(title, msg, myCallback);

我正在尝试设计它的样式。但是，似乎只有background 和text-align 属性有效，而设置font-style、font-family 和font-weight 则无效。这是我的 css 文件：

msgbox.css

.msgbox {
    text-align: center;
    font-size: 30px !important;
    font-weight: bold !important;
    font-family: 'Times New Roman' !important;
}

popwindow.css

.popWindow .x-container .x-box-item {
    text-align: center ;
    font-size: 17px ;
    font-weight: bold ;
    font-family: 'Times New Roman' ;
}

.popWindow .x-form-item-body {
    text-align: center !important;
    font-size: 17px !important;
    font-weight: bold !important;
    font-family: 'Times New Roman' !important;
}

如何设置消息框的标题和消息样式？

更新 1，我得到了字体系列和字体大小：

.popWindow .x-form-display-field{
    text-align: center !important;
    font-size: 17px !important;
    font-weight: bold !important;
    font-family: 'Times New Roman' !important;
}

但是，对齐仍然不起作用

【问题讨论】：

文本位于两个 div 容器中 - 一个用于标题，一个用于正文。您应该检查元素以找到这些 div 容器具有的类，因为它们用于主题中的文本样式，而不是父元素。我猜他们被称为 .msgbox .x-messagebox-header 和 .msgbox .x-messagebox-body 之类的，但请检查浏览器中的消息框元素。
好的，请注意。谢谢。

标签： css extjs extjs4 extjs4.2

【解决方案1】：

这就是它起作用的原因。

.msgbox - 对齐标题

.x-header-text - 负责除对齐之外的标题样式

.x-form-display-field 和 .x-form-item-body .x-form-display-field-body - 负责消息/正文属性。我忘记了哪个负责对齐，哪个负责样式（如果它们首先是分开的）。

.msgbox{
    text-align: center !important;
}

.msgbox .x-header-text {
    text-align: center !important;
    font-size: 15px !important;
    font-weight: bold !important;
    font-family: 'Arial' !important;
    color: red;
}

.msgbox .x-form-display-field{
    text-align: center !important;
    font-size: 17px !important;
    font-family: 'Arial' !important;
}

.msgbox .x-form-item-body .x-form-display-field-body {
    text-align: center !important;
    font-size: 17px !important;
    font-family: 'Arial' !important;
}

【讨论】：

【解决方案2】：

这样定义标题：

title: '<div id="title" align="center">TEXT</div>',

在css中：

#title {
  color: @Blue
}

【讨论】：