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
12
Ene 12
Twittear
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
El de arriba es tonto
Martes 03 de diciembre, 2019no se puede copiar pegar el codigo??
Viernes 02 de marzo, 2018hiciste esto para compartir o para
decirle a todos que sabes y que no quieres que nadie
mas sepas