Question

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

我现在有以下代码

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

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脚本完成。

@Fabio Barros：

我得到的按钮如下：

我还在按钮文本中添加了填充：

'   .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);
    }
});

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

2 个答案: