ExtJS change position of default buttons in MessageBox (ExtJS 4.2.1)

Question

If you use the code with the default buttons:

Ext.Msg.show({
 title:'Save Changes?',
 msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
 buttons: Ext.Msg.YESNOCANCEL,
 icon: Ext.Msg.QUESTION
});

the buttons on the window are in the order yes - no - cancel. I would like them in the order cancel - no - yes for consistency in my app. Is there a way to add a different configuration or change this for my needs?

Did you try using ```buttons: [ {text: 'Cancel', itemId: 'cancel'}, {text: 'No', itemId: 'no'}, {text: 'Yes', itemId: 'yes', ui: 'action'} ]``` — bunkdeath, Mar 18 '17 at 08:08

Sergey Novikov · Accepted Answer · 2017-03-18T15:32:11.517

8

Default buttons is simply created within Ext.window.MessageBox.makeButton() private method based on Ext.window.MessageBox.buttonIds config and show / hide based on bitmask buttons: Ext.Msg.YESNOCANCEL.

So we just have to override buttonIds config and bitmasks:

    Ext.define('Ext.overrides.MessageBox', {
        override: 'Ext.window.MessageBox',

        OK: 1,           //0001
        CANCEL: 2,       //0010
        NO: 4,           //0100
        YES: 8,          //1000

        OKCANCEL: 3,     //0011
        YESNO: 12,       //1100
        YESNOCANCEL: 14, //1110

        buttonIds: [
            'ok', 'cancel', 'no', 'yes'
        ]
    });

Ext.Msg / Ext.MessageBox is singletones and initially defined as instance of Ext.window.MessageBox before our override (check last lines of Ext.MessageBox code).

So we have to override Ext.Msg / Ext.MessageBox aswell:

    Ext.Msg = Ext.MessageBox = new Ext.window.MessageBox();

Check this simple fiddle.

edited Mar 18 '17 at 15:32

answered Mar 18 '17 at 08:11

Sergey Novikov

4,096
7
33
59

Instead of overriding we can just use config for buttons instead of already provided set of buttons. See my comment on original question. – bunkdeath Mar 18 '17 at 08:16
1

@bunkdeath, if we want to use this button order in whole application - its better to override. – Sergey Novikov Mar 18 '17 at 08:20
Yes. After re-reading the question. I felt overriding will do good for development because of the order they have in their app. (y) – bunkdeath Mar 18 '17 at 08:30
But Override have a serious problem ..It will effect other button alignments – Surya Prakash Tumma Mar 18 '17 at 13:10
Try with remaining buttons Ext.MessageBox.OKCANCEL, Ext.MessageBox.YESNO the buttons will change check my fiddle https://fiddle.sencha.com/#view/editor&fiddle/1sbn – Surya Prakash Tumma Mar 18 '17 at 13:15
@surya-prakash-tumma True! forgot to update bitmasks. Check update. – Sergey Novikov Mar 18 '17 at 15:23

ExtJS change position of default buttons in MessageBox (ExtJS 4.2.1)

1 Answers1