Question

如何使用自定义按钮显示ExtJS消息框。

我想要一个带有自定义消息的消息框以及“取消”和“取消激活”按钮。请提出一些想法。

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

我正在使用它，但没有得到任何按钮。

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();

Answer 2

MessageBox是用于提示，显示，警报等的内部管理窗口的单个实例。

您可以通过传入一个字符串来更改buttonText，如下所示：

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

参考： MessageBox

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

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

Answer 3

使用＆＃39; buttonText＆＃39;而不是＆＃39;按钮＆＃39;，

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

Answer 4

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

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

带有自定义按钮的ExtJs消息框

4 个答案: