Ext.Button

Ext.Button es la clase para desplegar botones en Sencha Touch. Existen diferentes tipos y estilos de botones que puedes crear usando las configuraciones icon, iconCls, iconAlign, iconMask, ui, y text definidas en Ext.Button. Ejemplo de un botón simple
<pre name="code" class="javascript">
var button = Ext.create('Ext.Button', {
text: 'Button'
});
</pre>

Iconos

Es posible crear un botón solo con un icono sin texto utilizando la configuración iconCls de Ext.Button:
<pre name="code" class="javascript">
var iconButton = Ext.create('Ext.Button', {
iconCls: 'refresh',
iconMask: true
});
</pre>

El uso de la configuración iconMask es obligatorio cuando se quiere utilizar un botón con el icono.

Aquí se listan los iconos disponibles (si $include-default-icons se establece en true):

• action
• add
• arrow_down
• arrow_left
• arrow_right
• arrow_up
• compose
• delete
• organize
• refresh
• reply
• search
• settings
• star
• trash
• maps
• locate
• home
• Textos simbolo


Texto símbolo

Los botones también pueden tener un símbolo sobre puesto, utilizando la configuración badgeText:
<pre name="code" class="javascript">
var badgedButton = Ext.create('Ext.Button', {
text: 'Mi boton',
badgeText: '2'
});
</pre>


UI
Los botones también vienen con un conjunto de estilos diferentes definidos como UIs.Aqui una lista de los estilos existentes. (si $include-button-uis es true):

• normal - boton basico gris
• back - Boton de regreso
• forward - Boton de siguiente
• round - Boton redondeado
• action - utilizando la variable $base-color (azul obscuro por defecto)
• decline - rojo
• confirm - verde

Y configurarlos es muy simple:
<pre name="code" class="javascript">
var uiButton = Ext.create('Ext.Button', {
text: 'Mi button',
ui: 'action'
});
</pre>

Y como se ven:
<pre name="code" class="javascript">
Ext.create('Ext.Container', {
fullscreen: true,
padding: 4,
defaults: {
xtype: 'button',
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
items: [
{ ui: 'normal', text: 'normal' },
{ ui: 'back', text: 'regreso' },
{ ui: 'round', text: 'redondeado' },
{ text: 'Mi boton', badgeText: '2' },
{ ui: 'action', text: 'action' },
{ ui: 'decline', text: 'declinar' },
{ ui: 'confirm', text: 'confirmar' }
]
});
</pre>

El ui por defecto es normal.

Es posible utilizar el sencha-button-ui CSS Mixin para crear tu propia version de UIs.

Ejemplos de uso

Este ejemplo muestra una colección de botones desplegados en pantalla en dos toolbars. Cuando presionas el botón central, intercambia el iconCls en cada botón en la página.
<pre name="code" class="javascript">
Ext.createWidget('container', {
fullscreen: true,
layout: {
type: 'vbox',
pack:'center',
align: 'center'
},
items: [
{
xtype: 'button',
text: 'Change iconCls',
handler: function() {
// classes for all the icons to loop through.
var availableIconCls = [
'action', 'add', 'arrow_down', 'arrow_left',
'arrow_right', 'arrow_up', 'compose', 'delete',
'organize', 'refresh', 'reply', 'search',
'settings', 'star', 'trash', 'maps', 'locate',
'home'
];
// get the text of this button,
// so we know which button we don't want to change
var text = this.getText();

// use ComponentQuery to find all buttons on the page
// and loop through all of them
Ext.Array.forEach(Ext.ComponentQuery.query('button'), function(button) {
// if the button is the change iconCls button, continue
if (button.getText() == text) {
return;
}

// get the index of the new available iconCls
var index = availableIconCls.indexOf(button.getIconCls()) + 1;

// update the iconCls of the button with the next iconCls, if one exists.
// if not, use the first one
button.setIconCls(availableIconCls[(index == availableIconCls.length) ? 0 : index]);
});
}
},
{
xtype: 'toolbar',
docked: 'top',
defaults: {
iconMask: true
},
items: [
{ xtype: 'spacer' },
{ iconCls: 'action' },
{ iconCls: 'add' },
{ iconCls: 'arrow_down' },
{ iconCls: 'arrow_left' },
{ iconCls: 'arrow_up' },
{ iconCls: 'compose' },
{ iconCls: 'delete' },
{ iconCls: 'organize' },
{ iconCls: 'refresh' },
{ xtype: 'spacer' }
]
},
{
xtype: 'toolbar',
docked: 'bottom',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{ xtype: 'spacer' },
{ iconCls: 'reply' },
{ iconCls: 'search' },
{ iconCls: 'settings' },
{ iconCls: 'star' },
{ iconCls: 'trash' },
{ iconCls: 'maps' },
{ iconCls: 'locate' },
{ iconCls: 'home' },
{ xtype: 'spacer' }
]
}
]
});
</pre>

Opciones de configuración

• autoEvent : String
• badgeCls : String
• badgeText : String
• handler : Function
• icon : String
• iconAlign : String
• iconCls : String
• iconMask : Boolean
• iconMaskCls : String
• labelCls : String
• pressedCls : String
• scope : Object
• text : String
• ui : String


Métodos

• getAutoEvent( ) : String
• getBadgeCls( ) : String
• getBadgeText( ) : String
• getHandler( ) : Function
• getIcon( ) : String
• getIconAlign( ) : String
• getIconCls( ) : String
• getIconMask( ) : Boolean
• getIconMaskCls( ) : String
• getLabelCls( ) : String
• getPressedCls( ) : String
• getScope( ) : Object
• getText( ) : String
• getUi( ) : String
• setAutoEvent( String autoEvent )
• setBadgeCls( String badgeCls )
• setBadgeText( String badgeText )
• setHandler( Function handler )
• setIcon( String icon )
• setIconAlign( String iconAlign )
• setIconCls( String iconCls )
• setIconMask( Boolean iconMask )
• setIconMaskCls( String iconMaskCls )
• setLabelCls( String labelCls )
• setPressedCls( String pressedCls )
• setScope( Object scope )
• setText( String text )
• setUi( String ui )


Eventos

• release( Ext.Button this, Ext.EventObject e, Object eOpts )PREVENTABLE
• tap( Ext.Button this, Ext.EventObject e, Object eOpts )PREVENTABLE


Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor

Danos tus comentarios

Danos tu comentario