CODEWITHSUNDEEP
javascriptextjsextjs4
Yobac
Yobac

Reputation: 43

How to change button order in Ext.Msg?

I have a MessageBox to show in my app, and it is specified that the 'YES' button has to be on the right. How could I change the YESNOCANCEL order ? (in a CANCELNOYES one maybe?)

Here's my actual code :

Ext.Msg.show({
             title: 'myTitle',
             msg: 'myMessage',
             buttonText : {
                 cancel : 'Cancel',
                 yes : 'Yes'
             },
             fn: function(btn) {
                 if(btn == 'yes') {
                     dodat(); 
                 }
             }
        });

Upvotes: 2

Views: 1397

Answers (2)

Sean Adkinson
Sean Adkinson

Reputation: 8615

I'd recommend NOT messing with the Ext.MessageBox singleton, and instead just create a custom extension of Ext.Window, with the buttons config of your choosing.

It is really just some minor configuration to make a window appear like its the message box. Something like:

var msgBox = new Ext.Window({
    width: 300,
    height: 150,
    buttons: [{ text: 'Cancel', handler...}, { text: 'Yes', handler...}],
    title: 'Alert',
    modal: true|false,
    html: 'Are you sure?'
});
msgBox.show();

If the styles aren't perfect, you could even add the "ext-mb-dialog", or whatever the classes are, to this window configuration.

Upvotes: 1

Reimius
Reimius

Reputation: 5712

Ext.Msg is a singleton, so it has an odd lifecycle in comparison to a normal component. This means that the code below should probably be executed early in the Ext.onReady or App creation. This will change the button order for all alerts in your application also because Ext.Msg is a singleton:

var msgButtonBar = Ext.Msg.down("toolbar");
var okButton = msgButtonBar.items.items[0];
var yesButton = msgButtonBar.items.items[1];
var noButton = msgButtonBar.items.items[2];
var cancelButton = msgButtonBar.items.items[3];
msgButtonBar.removeAll(false);
msgButtonBar.add([cancelButton, noButton, yesButton, okButton]);

It basically just reorders the button in the Singleton.

Upvotes: 7

Related Questions