Highlight default button in ExtJS (3.x) MessageBox

Question

is there an Ext-sanctioned way to highlight the default button (the one triggered by pressing Enter) in Ext.MessageBox?

Please note that I do not want to do that by focusing the button when the MessageBox is shown (in case of a "prompt" dialog I want the input element to have focus).

I know I can do that by adding a custom class to the button element but ... maybe there is a better and more Ext-like way of doing this?

Thanks.

Answer 1

In short... no. Ext currently provides no method of highlighting a button in any of the Ext.MessageBox components, not via a config option anyway.

There are ways however, depending on the scenario. For example, if you're using Ext.MessageBox.show() (which you can actually use for all message boxes), then you can do something like...

new Ext.Msg.show({
   title: 'Test',
   msg: 'A sample message box with a button marked as default',
   buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' },
   fn: function(btn) {
       if(btn == 'ok') {
          //do something
       }
   },
   icon: Ext.Msg.WARNING
} 

All we've done is add <b> tags to one of the buttons in our config, this would show it in bold obviously.

The other way that you've mentioned is to add a custom class and mark the button in a colour of text, you could even just add the class like we did with the <b> tags above to make it easier..

buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },

Other than this style of approach, or without extending the Ext.MessageBox class, there's no other way to achieve this.