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

Question

Is there a way that you can specify by default to highlight the default button (the one that is launched by pressing Enter) in Ext.MessageBox?

Note that I do not want to do this by focusing the button when the MessageBox is displayed (in the case of the "prompt" dialog, I want the input element to have focus).

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

Thank.

Answer 1

... . Ext Ext.MessageBox, .

, . , Ext.MessageBox.show() ( ), - ...

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
} 

, , <b> , , , .

, , - , , , <b> , ..

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

Ext.MessageBox .

Answer 2

ExtJs 4 :

Ext.MessageBox.defaultButton = buttonIndex;

"buttonIndex" - . , Ext.MessageBox.Show.

Answer 3

Jaitsu has a better answer, but in case it might be useful to someone else ... here's a way to do it with styles. The same trick can be applied to any other button (for example: the "Window" button).

Add this to your css:

.x-btn-default td.x-btn-mc {
  outline: 1px dotted black;
}

Then define these buttons:

  ...
  ,buttons: [
    {
      text: 'Ok',
      ,handler: handleFn
      ,cls: 'x-btn-default'
    },{
      text: 'Cancel',
      ,handler: handleFn
    }
  ]
  ,...