http://codigo.extjs.mx/extjs4/qtips/rendertooltip/buttonstyle.rar
En el siguiente tutorial veremos cómo aplicar un estilo a un componente button para cambiar su color de fondo y su tipo de letra.
Primero definimos una clase css para aplicarla a la propiedad cls del componente button
<pre name="code" class="css">
.x-btn-green {
border-color: #06D31B;
background-image: none;
background-color: #06D31B;
}
</pre>
De igual forma definimos una clase para el texto del botón.
<pre name="code" class="css">
.x-btn-default-medium .x-btn-inner {
font-size: 14px;
font-weight: bold;
font-famili: helvetica,arial,verdana,sans-serif;
color: white;
padding: 0 8px;
}
</pre>
A continuación definimos un grupo de botones dentro de un container, en su propiedad cls asignamos el nombre de la clase css definida anteriormente.
<pre name="code" class="javascript">
{
xtype: 'button',
text: 'Small',
cls:'x-btn-default-small x-btn-green'
},{
xtype: 'button',
text: 'Medium',
scale: 'medium',
cls:'x-btn-default-medium x-btn-red'
},{
xtype: 'button',
text: 'Large',
scale: 'large',
cls:'x-btn-default-large x-btn-blue'
}
</pre>
Ahora veamos el ejemplo completo:
<pre name="code" class="javascript">
Ext.onReady(function() {
Ext.create("Ext.container.Viewport",{
renderTo: Ext.getBody(),
layout:'fit',
scope:this,
items:[{
xtype: 'container',
layout: {
type: 'table',
columns: 4,
tdAttrs: { style: 'padding: 5px 10px;' }
},
items: [{
xtype: 'component',
html: 'Botones:'
}, {
xtype: 'button',
text: 'Small',
cls:'x-btn-default-small x-btn-green'
}, {
xtype: 'button',
text: 'Medium',
scale: 'medium',
cls:'x-btn-default-medium x-btn-red'
}, {
xtype: 'button',
text: 'Large',
scale: 'large',
cls:'x-btn-default-large x-btn-blue'
}]
}]
})
})
</pre>
Danos tus comentarios