botones extjs en la apariencia de la barra de herramientas

Question

Oye, tengo una pequeña pregunta realmente, pero algo parece que no puedo descubrir.

cuando coloco un botón en una barra de herramientas extjs, aparece con una apariencia por defecto (como cualquier opción de la barra de herramientas de Windows)

¿Cómo puedo hacer que se vea como un botón en una forma ??

Answer 1

Ver este post en el foro de Sencha Toolbar Button Style. También encontré este estilo de un botón como texto bastante intuitivo para los usuarios. Con solo unas pocas líneas de CSS agregadas a su archivo maestro ExtJs css, puede cambiar esta apariencia globalmente para su aplicación.

Answer 2

Esto es bastante cercano a esto: ExtJS Button Style Toolbar

La respuesta que estaba buscando se encontró en esa pregunta:

Adición

ctCls: 'x-btn-over' 

de configuración del botón hace que realmente se ven como una botón. Esto es como un truco porque esto es esencialmente diseñar el botón de la barra de herramientas para que parezca que está sobrevolando, pero en mi caso decidí que era lo suficientemente bueno.

editar: No he tocado ExtJS desde la versión 3, por lo que parece que esto ya no funciona.

Answer 3

Trate de esta manera:

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

Aquí está mi solución (que funciona para ExtJs 3.3.3):

Para botón Agregar clase adicional, lo he denominado como 'X-barra de herramientas-gris- BTN ':

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

Estilos para la clase suplementaria, en archivo CSS independiente:

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

Como las imágenes del botón Ext se encuentran en el archivo '/ext-3.3.3/resources/images/default/button/btn.gif', cambié solo posición de fondo propiedad. Parece un botón nativo.

Answer 5

Hay que envolverlo en un panel, aquí es solución para Extjs 4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}