ExtJS 4 -设计窗口样式,MessageBox

o2rvlv0m 于 2022-11-04 发布在其他

关注(0)|答案(2)|浏览(171)

我正在构建一个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;
}

然而，校准仍然不起作用

extjs

来源：https://stackoverflow.com/questions/26954006/extjs-4-styling-a-window-messagebox

2条答案

按热度按时间

ar7v8xwq1#

以下是它的工作原理。
.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;
}

赞(0）回复(0）举报 2022-11-04

ccrfmcuu2#

定义标题如下：

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

在CSS中：


# title {

  color: @Blue
}

赞(0）回复(0）举报 2022-11-04

我来回答

ExtJS 4 -设计窗口样式,MessageBox

2条答案

相关问题

热门标签

最新问答