¿Cómo establecer correctamente el tamaño del icono de un botón en extjs?

Question

Estoy usando extjs4 y lo que trato de hacer parece ser simple pero no puedo encontrar una solución que funcione.

que tienen un icono de 64 * 64px y quiero que mi botón para mostrar que la imagen de fondo como, pero extjs sólo muestra la imagen parcialmente .Googled en la red para una solución pero nadie sugirió una trabajo solución para ello. Solo quiero que mi imagen de fondo se ajuste a mi botón.

aquí es mi código JS:

{ 
    xtype : 'button', 
    text : null, 
    iconCls : 'startbutton', 
    //icon:'./assets/icons/startbtn.png', 
    //style:{height:'60px'}, 
    width : 64, 
    height : 64 
} 

aquí es mi código CSS:

.x-btn-icon .startbutton { 
    background-image: url(start.png) !important; 
} 

He intentado algunas combinaciones css y todavía sin éxito.

Answer 1

Los iconCls se refiere estrictamente al icono del botón, si desea que la imagen para cubrir todo el botón se debe añadir el fondo a un css clase agregada al botón.

{ 
    xtype: 'button', 
    width: 64, 
    height: 64, 
    text: 'some text', 
    cls: 'startbutton' 
} 

y el css

.startbutton { 
    background-image: url(start.png) !important; 
} 

Answer 2

Aunque esto no ayudará directamente si estás imagen es 64px de alto ancho, la siguiente opción de configuración de 'escala' se puede utilizar para ajustar el tamaño de un botón /:

• 'pequeño' - Resultados en el elemento del botón siendo 16px de alto.

• 'medio' - El resultado es que el elemento del botón es 24px de alto.

• 'grandes' - Resultados en el elemento de botón son 32px altos

Answer 3

estoy usando ExtJS 3.4.0 y que no sé si esto es más fácil en 4.x pero espero que sí!

He resuelto el problema de la creación de nuevos estilos de botones, además de pequeño/medio/grande, a continuación, en el botón especificando:

{ text: 'Read Data', 
    scale: 'extra', 
    iconAlign: 'left', 
    iconCls:'read_icon'} 

código CSS se debe especificar para cada lado estás utilización va en el icono, en Mi caso acabo de definir para el lado izquierdo, pero tienes que clonar para cada lado arriba/abajo/derecha/izquierda. puede encontrar todo el código original dentro ext-all.css, esto es lo que estoy usando un icono de 64x64

.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{ 
    background-position: 0 center; 
    background-repeat: no-repeat; 
    padding-left:66px; 
    height:64px; 
} 

Se puede volver a utilizar el código para todos los botones 'en extra' en su tamaño proyecto y puede agregar tantos como desee

Answer 4

Tuve un problema importante con la respuesta aceptada. El texto del botón (botón izquierdo en la imagen, a continuación) apareció en la posición incorrecta (detrás del icono) - la posición en la que estaba configurado para usar las escalas predeterminadas.

Para utilizar un tamaño distinto de lo predeterminado icono y colocar el texto en la posición correcta, mi solución era bastante simple, sin estilos básicos primordiales.

Acabo de reemplazar la propiedad text con la propiedad html. Luego, coloqué el texto del botón deseado dentro de un 'lapso' y agregué una clase a este lapso para colocarlo correctamente con CSS.

Este es el código (probado en IE, Firefox, Chrome):

definición del botón

xtype:'button', 
iconCls:'contactIcon80', 
iconAlign:'top', 
width:120, 
height:100, 
html:'<span class="bigBtn">Damn you hayate</span>' 

iconCls Botón clase

.contactIcon80 { 
    background-image: url(../images/calendar80.png) !important; 
    width:80px!important; 
    height:80px!important; 
    margin-right: auto !important; 
    margin-left: auto !important; 
} 

Span

.bigBtn { 
    position: absolute; 
    bottom: 4px !important; 
    left: 0% !important; 
    text-align: center !important; 
    width: 120px !important; 
} 

De curso esto es para la parte inferior del texto de la parte superior del icono. Puedes personalizarlo para otros diseños