如何在消息框弹出窗口上对按钮进行样式设置

Question

我想知道如何在 MsgBox 弹出窗口上设置按钮样式？？

我现在有以下代码

它工作正常，但我无法对按钮进行任何样式设置。就像我希望“YES”按钮为蓝色和圆角，“NO”按钮为红色。

afterrender: function() {

  MsgBox.show({
    msgs: [{
      type: 'info',
      msg: Lang.getCustomFrameworkMessage('Do you want to search google?')
    }],
    buttons: MsgBox.YESNO,
    fn: function(buttonId) {
      if (buttonId === "yes") {
        var redirect = 'https://google.com'
        window.open(redirect);

      }
    }
  }).setBodyStyle('font-size: 18px; text-align: center').setSize(600, 50);
}

仅供参考， 我没有（或不能）有一个 css 文件，因为我在一个只支持 Extjs 的应用程序中使用 Extjs，所以所有的样式都只需要使用 extjs 脚本来完成。

@法比奥·巴罗斯：

我得到的按钮如下：

我在按钮文本中添加了填充，如下所示：

'   .x-message-box-yes .x-btn-inner, '+
                 '   .x-message-box-no .x-btn-inner { '+
                 '       color: white !important;'+
                 '           padding: 2px !important; '+
                 '       font-weight: bold !important;'+
                 '       font-size: 12px !important;'+

但仍然无法将文本放置在按钮的中心。请帮忙。

Answer 1

由于您无法从文件中添加 CSS 或更改页面中的 css，因此我使用了 Narendra 答案并创建了另一个创建自己的 css 样式的解决方案：

Ext.application({
    name: 'Fiddle',

    launch: function () {


        //Create a new Style for the bottons
        var myStyle = document.createElement("STYLE");
        myStyle.innerHTML =
                 '   .x-message-box-no, '+
                 '   .x-message-box-yes { '+
                 '       border-radius: 1em !important; '+
                 '           padding: 3px !important; '+
                 '   } '+
                 '    .x-message-box-yes { '+
                 '       background: blue !important; '+
                 '   } '+
                 '   .x-message-box-no { '+
                 '       background: red !important; '+
                 '   } '+
                 '   .x-message-box-yes .x-btn-inner, '+
                 '   .x-message-box-no .x-btn-inner { '+
                 '       color: white !important;'+
                 '       font-weight: bold !important;'+
                 '   } ';

        //Add it to the head of the document
        var bodyClass = document.getElementsByTagName('head')[0];
        bodyClass.insertBefore(myStyle, bodyClass.childNodes[2]);

        //Change the message buttons cls
        Ext.MessageBox.msgButtons.yes.cls = 'x-message-box-yes';
        Ext.MessageBox.msgButtons.no.cls = 'x-message-box-no';

        Ext.Msg.show({
            title: 'Info',
            msg: 'Do you want to search google?',
            buttons: Ext.Msg.YESNO,
            fn: function (buttonId) {
                if (buttonId === "yes") {
                    window.open('https://google.com');
                }
            }
        }).setBodyStyle('font-size: 18px; text-align: center').setSize(300, 50);
    }
});

希望对你有帮助！

Answer 2

为此，您可以创建自己的自定义消息框或覆盖Ext.window.MessageBox。 MessageBox 有方法makeButton，所以你需要为Yes 或No 按钮添加你想要的css 或样式。

在这个Fiddle中，我创建了一个使用创建自定义消息框的演示。

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('MyMsg', {

            extend: 'Ext.window.MessageBox',

            makeButton: function (btnIdx) {
                var btnId = this.buttonIds[btnIdx];
                return new Ext.button.Button({
                    handler: this.btnCallback,
                    itemId: btnId,
                    cls: (Ext.isArray(this.cls) ? this.cls[0] : this.cls) + '-' + btnId,
                    scope: this,
                    text: this.buttonText[btnId],
                    minWidth: 75
                });
            },
        });

        var MsgBox = new MyMsg();

        MsgBox.show({
            title: 'Info',
            msg: 'Do you want to search google?',
            buttons: MsgBox.YESNO,
            fn: function (buttonId) {
                if (buttonId === "yes") {
                    window.open('https://google.com');
                }
            }
        }).setBodyStyle('font-size: 18px; text-align: center').setSize(300, 50);
    }
});