Customize Ext.window.MessageBox ExtJS 4

Question

Im using Ext.window.MeassageBox for confirmation dialog window.

Code is something like this:

deleteSomething: function( grid, row, col ) {
    var ids = [ grid.store.getAt( row ).get( 'id' ) ];

    function deleteSomething ( btn, text ) {
        if( btn === 'yes' ) {
            Ext.Ajax.request( {
                url: 'data/deleteSomething.php',
                params: {
                    'ids': Ext.encode( ids )
                },
                success: function( response ) {
                    //perform some actions
                }
            } );
        }
    }

    Ext.MessageBox.show( {
        animEl: 'elId',
        buttons: Ext.MessageBox.YESNO,
        fn: deleteSomething,
        msg: Locale.gettext( 'Are you sure you want to remove the selected thing?' ),
        title: Locale.gettext( 'Delete?' )
    } );
}

I want to apply some css rules for message field and scale: 'medium' with right-side align for buttons. Is there any way to achive it without extend MessageBox?

Answer 1

Did you try to add buttons properties like below?

Ext.MessageBox.show({
   buttons: [
      {text: 'YES', scale: 'medium'},
      '->',
      {text: 'NO', scale: 'medium}
   ]
});

EDIT : why we don't use a simple window component?

var winDelete = new Ext.Window({
    width: 300,
    modal: true,
    closeAction: false,
    title: 'Are you sure to delete this record?',
    closable: false,
    html: '<span>The selected records will remove from the list.<br/>Are you sure?</span>',
    buttons: [
        {
            text: 'YES',
            scale: 'medium',
            cls: 'btn-delete-yes',
            listeners: {
                click: function() {
                    deleteSomething();
                }
            }
        }, '->',
        {
            text: 'NO',
            scale: 'medium',
            cls: 'btn-delete-no',
            listeners: {
               click: function() {
                   winDelete.close();
               }
            }
        }
    ]
});