Yes/No buttons in Confirm box in Sencha touch

Question

I have put a confirm box on the logout option of my application. Code for the same is as follows:

var abc = Ext.Msg.confirm('Confirm logout', 'Are you sure you want to logout?', function(e)
 {
   if(e == 'yes')
     {
        // logout code
     }
 }
 );

No button of the confirm box is visible before the yes button.

How can I display Yes button before the No Button?

Any help is appreciated.

Answer 1

According to the sencha touch source code ( http://docs.sencha.com/touch/1-1/source/MessageBox.html#Ext-MessageBox-method-confirm ) YESNO is defined as "no, yes":

(function(){
    var B = Ext.MessageBox;

    Ext.apply(B, {
        OK     : {text : 'OK',     itemId : 'ok',  ui : 'action' },
        CANCEL : {text : 'Cancel', itemId : 'cancel'},
        YES    : {text : 'Yes',    itemId : 'yes', ui : 'action' },
        NO     : {text : 'No',     itemId : 'no'},
        // Add additional(localized) button configs here

        // ICON CSS Constants
        INFO     : 'x-msgbox-info',
        WARNING  : 'x-msgbox-warning',
        QUESTION : 'x-msgbox-question',
        ERROR    : 'x-msgbox-error'
    });

    Ext.apply(B, {
        OKCANCEL    : [B.CANCEL, B.OK],
        YESNOCANCEL : [B.CANCEL, B.NO, B.YES],
        YESNO       : [B.NO, B.YES]
        // Add additional button collections here
    });

})();

You can use Ext.override to override this functionality in your own app:

Ext.override(Ext.MessageBox, {
    YESNO: [Ext.MessageBox.YES, Ext.MessageBox.NO]
});

Answer 2

You can override like the below code in ST2.1, Can also implement localization in YES/NO buttons using this.

Ext.MessageBox.override({
        confirm: function(title, message, fn, scope) {
        return this.show({
            title       : title || null,
            message     : message || null,
            buttons     : [
            {text: 'Yes', itemId: 'yes', ui: 'action'},
            {text: 'No',  itemId: 'no'}
        ],
            promptConfig: false,
            scope       : scope,
            fn: function() {
                if (fn) {
                    fn.apply(scope, arguments);
                }
            }
        });
    }

        });

Answer 3

It is Very easy Try this

Ext.Msg.confirm("Logout", "Are you Sure u want to LogOut?", function(btn){
  if (btn == 'yes'){
    Ext.Viewport.setActiveItem({xtype:"Home"});   // which page wants to redirect
  }
});

Answer 4

I tried this, and works for me:

Try this solution:

<script type="text/javascript">
     (function () {
        Ext.override(Ext.MessageBox, {
            buttonText: { yes: "Sí", no: "No", cancel: "Cancelar" }
        });
      })();
</script>

Answer 5

 Ext.Msg.show({
                    title: '提示',
                    message: '是否继续?',
                    width: 300,
                    buttons: [
                        {text: '是', itemId: 'yes', ui: 'action'},
                        {text: '否', itemId: 'no'}
                    ],
                    fn: function (buttonId) {
                        alert('You pressed the "' + buttonId + '" button.');
                    }
                });