Highlight default button in ExtJS (3.x) MessageBox - button

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 ExtJs 4 you can set the default button as follows:
Ext.MessageBox.defaultButton = buttonIndex;
Where 'buttonIndex' is the index of the button on the dialog. You need to do this before you call Ext.MessageBox.Show.

Answer 2

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.

Answer 3

Jaitsu has the best answer, but in case this might be useful to somebody else... here is a way to do that with styles.
The same trick can be applied to any other button (like: Window buttons).
Add this to your css:
.x-btn-default td.x-btn-mc {
outline: 1px dotted black;
}
Then define buttons like this:
...
,buttons: [
{
text: 'Ok',
,handler: handleFn
,cls: 'x-btn-default'
},{
text: 'Cancel',
,handler: handleFn
}
]
,...