Estilo de un Botón

Modificar el estilo de un boton es una tarea sencilla si dominamos un poco de reglas de estilo de css. Al igual que todos los componentes en ExtJS, los botones tienen definidos algunas clases que podemos sobreescribir, esto con el fin de mejorar nuestras interfaces y aumentar la usabilidad

Creado el Domingo 26 de mayo, 2013

Vista previa Descargar

Compartelo:
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
                                                    .x-btn-green {
                                                         border-color: #06D31B;
                                                         background-image: none;
                                                         background-color: #06D31B;
                                                    }
                                                    



De igual forma definimos una clase para el texto del botón.
                                                    .x-btn-default-medium .x-btn-inner {
                                                         font-size: 14px;
                                                         font-weight: bold;
                                                         font-family: helvetica,arial,verdana,sans-serif;
                                                         color: white;
                                                         padding: 0 8px;
                                                    }
                                                    


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.
                                                    {
                                                         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'
                                                    }
                                                    


Ahora veamos el ejemplo completo:
                                                    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'
                                                                }]
                                                            }]
                                                        })
                                                    })