Resalte el botón predeterminado en ExtJS (3.x) MessageBox

Question

¿Existe alguna forma sancionada por Ext de resaltar el botón predeterminado (el que se activó presionando Enter) en Ext.MessageBox?

Tenga en cuenta que no quiero hacer eso enfocando el botón cuando se muestra MessageBox (en el caso de un cuadro de diálogo de "solicitud" deseo que el elemento de entrada tenga el foco).

Sé que puedo hacer eso agregando una clase personalizada al elemento del botón pero ... ¿tal vez hay una manera mejor y más Ext de hacer esto?

Gracias.

Answer 1

En resumen ... no. Actualmente, Ext no proporciona ningún método para resaltar un botón en ninguno de los componentes Ext.MessageBox, no a través de una opción de configuración de todos modos.

Sin embargo, existen formas, dependiendo de la situación. Por ejemplo, si está utilizando Ext.MessageBox.show() (que se puede utilizar realmente para todos los cuadros de mensaje), entonces usted puede hacer algo como ...

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 
} 

único que hemos hecho es añadir <b> etiquetas a una de las botones en nuestra configuración, esto lo mostraría en negrita, obviamente.

La otra forma que ha mencionado es agregar una clase personalizada y marcar el botón en un color de texto, incluso podría agregar la clase como lo hicimos con las etiquetas <b> de arriba para hacerlo más fácil ..

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

Aparte de este tipo de enfoque, o sin extender la clase Ext.MessageBox, no hay otra manera de lograr esto.

Answer 2

Jaitsu tiene la mejor respuesta, pero en caso de que pueda ser útil para otra persona ... he aquí una forma de hacerlo con estilos. El mismo truco se puede aplicar a cualquier otro botón (como: Botones de ventana).

Agregue esto a su css:

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

A continuación, defina botones de la siguiente manera:

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

Answer 3

En ExtJs 4 se puede establecer el botón predeterminado de la siguiente manera:

Ext.MessageBox.defaultButton = buttonIndex; 

Dónde 'buttonIndex' es el índice del botón en el diálogo. Debe hacer esto antes de llamar a Ext.MessageBox.Show.