ExtJs Message box with Custom buttons

Question

How to display ExtJS Message box with Custom buttons.

I want a Message box with a Custom message and "Cancel" and "Deactivate" Buttons. Please give some idea.

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

I am using it like this but not getting any buttons.

score 16 · Answer 1 · answered Nov 27 '11 at 12:37

In ExtJS 4, you can make your own component like this:

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

then:

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

You defining a class and create a component within. Why not just extend a Messagebox? — A1rPun, Jan 24 '13 at 04:31

MMT · Accepted Answer · 2011-06-07T06:19:42.267

8

MessageBox is an single instance of an internally managed Window used for prompt, show, alert, etc.

You can change the buttonText by passing in a string for show like this:

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

Refer : MessageBox

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

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

edited Jun 07 '11 at 06:19

answered Jun 07 '11 at 06:09

MMT

2,206
2
16
25

Thank you for your replay..its working fine,but how to add handler ,when iam trying to add handler for one button,buttons are not getting........thanks – MNR Jun 07 '11 at 06:42
1

add this : `fn : function(btn){ console.log('btn'+btn);}` – MMT Jun 07 '11 at 07:15
1

I think it's important to note that the `buttons` property is only available when you create a new message box. If you're using `Ext.Msg.show({config})` there is no `button` property! – Patrick Aug 31 '13 at 04:25

score 2 · Answer 3 · answered Aug 07 '14 at 06:00

2

Use 'buttonText' instead of 'button',

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

answered Aug 07 '14 at 06:00

Jeff Johny

418
1
5
19

score 0 · Answer 4 · answered Dec 15 '14 at 07:51

0

In ExtJS 4 and ExtJS 5, to set custom text for buttons you need to use both buttons and buttonText configs:

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

answered Dec 15 '14 at 07:51

endriju

1,508
13
10

ExtJs Message box with Custom buttons

4 Answers4

Linked