使用自定义按钮的ExtJS消息框

Question

如何显示带有自定义按钮的ExtJS消息框。

我想要一个带有自定义消息和“取消”和“停用”按钮的消息框。请给一些想法。

buttons: [{
    text: "Cancel",
    handler: function () {
        Ext.MessageBox.hide();
        //submitTicketForm();
    }
},{
    text: "Deactivate",
    handler: function () {
        Ext.MessageBox.hide();
    }
}],

我使用它就像这样，但没有得到任何按钮。

- MNR

Answer 1

在ExtJS 4中，您可以像这样制作自己的组件：

Ext.define('App.view.MyDialog', {
    /**
     * Shows the dialog.
     */
    show: function() {
        var dialog = Ext.create('Ext.window.MessageBox', {
            buttons: [{
                text: 'baz',
                iconCls: 'icon-add',
                handler: function() {
                    dialog.close();
                }
            }]
        });

        dialog.show({
            title: 'foo!',
            msg: '<p>bar?</p>',
            icon: Ext.MessageBox.WARNING
        });

        dialog.setHeight(160);
        dialog.setWidth(420);
    }
});

那么：

var dialog = Ext.create('App.view.MyDialog');
dialog.show();

- Tower

---

你正在定义一个类并在其中创建一个组件。为什么不只是扩展Messagebox？ - A1rPun

Answer 2

MessageBox是一个内部管理的窗口，用于提示、显示、警告等。

你可以通过传递一个字符串来更改show函数的buttonText：

buttons: {ok: "Foo", cancel: "Bar"}

Refer : MessageBox

buttons: { 
                ok: "Foo", 
                handler: function(){ 
                    Ext.MessageBox.hide(); 

                },
                cancel: "Bar",
                handler: function(){
                    Ext.MessageBox.hide();
                }
        }

- MMT

---

谢谢您的回复，它很好用。但是我该如何添加处理程序？当我尝试为一个按钮添加处理程序时，其他按钮都无法正常工作。谢谢。 - MNR

添加此代码：fn：function（btn）{console.log（' btn '+ btn）;}。 - MMT

我认为需要注意的是，buttons 属性仅在创建新消息框时才可用。如果您正在使用 Ext.Msg.show({config})，则没有 button 属性！ - Patrick

Answer 3

使用'buttonText'替代'button'。

buttonText: {ok: 'Deactivate', cancel: 'Cancel'},
fn: function(btn) {
    if (btn === 'ok') {
        Ext.MessageBox.hide();
    }  else {
        Ext.MessageBox.hide(); 
    } 
}

- Jeff Johny

Answer 4

在ExtJS 4和ExtJS 5中，要为按钮设置自定义文本，您需要同时使用buttons和buttonText配置项：

buttons: [{
    Ext.Msg.OK
}],
buttonText: { 
    ok: "Custom text"
},
fn: function() { 
    // ...handle OK button
}

- endriju