Ext.Component

La mayoría de los componentes visuales en Sencha Touch son componentes. Cada componente en Sencha Touch es una subclase de Ext.Component, lo que significa que ellos pueden:

  • Desplegarse en pantalla ellos mismos utilizando un template
  • Mostrarse y ocultarse ellos mismos la veces que fuera necesario
  • Ellos mismos centrarse en la pantalla
  • Habilitarse o deshabilitarse

También, los componentes pueden hacer cosas un poco mas complejas como:

  • "Volar" por encima de otros componentes, como ventanas o cajas de mensajes
  • Cambiar su tamaño y posición en la pantalla con algunos efectos visuales
  • Acoplarse con otros componentes dentro de un área especifica (útil para los toolbars)
  • Alinearse a otros componentes, permitiendo que puedan ser arrastrados alrededor de la pantalla, aparecer en su cuerpo un scroll y otras cosas

Componentes disponibles

Hay muchos componentes disponibles en Sencha Touch, separados en 4 grandes grupos:

Componentes de navegación
• Ext.Toolbar
• Ext.Button
• Ext.TitleBar
• Ext.SegmentedButton
• Ext.Title
• Ext.Spacer
Componentes de almacenamiento obligado
• Ext.dataview.DataView
• Ext.dataview.ComponentView
• Ext.Carousel
• Ext.List
• Ext.NestedList
Componentes de captura de datos
• Ext.form.Panel
• Ext.form.FieldSet
• Ext.field.Checkbox
• Ext.field.Hidden
• Ext.field.Slider
• Ext.field.Text
• Ext.picker.Picker
• Ext.picker.Date
Componentes de propósito general
• Ext.Panel
• Ext.tab.Panel
• Ext.Viewport
• Ext.Img
• Ext.Map
• Ext.Audio
• Ext.Video
• Ext.Sheet
• Ext.ActionSheet
• Ext.MessageBox


Instanciando Componentes
Los componentes son creados de la misma manera que el resto de clases en Sencha Touch, usando el método Ext.create. Aquí un ejemplo de cómo crear un textfield:
<pre name="code" class="javascript">
var panel = Ext.create('Ext.Panel', {
html: 'Hola mundo cruel'
});
</pre>

Este código creara una instancia de Panel, configurado con un contenido básico en HTML. Un Panel es un componente simple que puede desplegar HTML o contener a otros componentes. En este caso, creamos una instancia de panel, pero aun no se mostrara en pantalla por que los elementos no se despliegan inmediatamente después de ser instanciados. Esto nos permite crear algunos otros componentes y modificarlos a placer antes de mostrarlos en pantalla, y es una manera más conveniente en lugar de desplegarlos y después intentar modificarlos.

Para mostrar el panel en pantalla, podemos utilizar el método add del Viewport global:

Ext.Viewport.add(panel);


Los Paneles también son Contenedores, lo que significa que pueden contener a otros componentes, coordinados por un Layout. Veamos el ejemplo anterior y esta vez crearemos el panel con dos componentes en un layout HBox:
<pre name="code" class="javascript">
var panel = Ext.create('Ext.Panel', {
layout: 'hbox',

items: [
{
xtype: 'panel',
flex: 1,
html: 'Panel izquierdo, 1/3 parte del tamano total',
style: 'background-color: #5E99CC;'
},
{
xtype: 'panel',
flex: 2,
html: 'Panel derecho, 2/3 del tamano totoal',
style: 'background-color: #759E60;'
}
]
});
Ext.Viewport.add(panel);
</pre>

Ahora creamos tres Paneles. El primero para contener a los otros dos. Los dos paneles internos fueron creados mediante la configuración xtype. Un xtype es una manera conveniente de crear componentes sin la necesitar de ejecutar el proceso de Ext.create y especificar el nombre completo de la clase, en lugar de ellos, solo se proporciona un alias que es el xtype, dentro del objeto de configuración y el framework hará el resto por ti.

También especificamos un layout en la parte de arriba del panel. En este caso un hbox, y su trabajo es dividir horizontalmente el ancho del contenedor padre pasándose en la propiedad 'flex' que debe definir cada uno de los hijos. Por ejemplo, si el padre es de 300px de ancho, y el primer hijo mide 100px de ancho es por su propiedad flex=1, el segundo seria 200px porque su propiedad flex se configuro en 2.

Configurando Componentes
Sea cual sea el componente que quieras instanciar, es necesario proporcionarle un objeto de configuración. Todas las propiedades de configuración de un componente se listan en el apartado de la documentación llamado "Config options". Es posible pasarle cualquier cantidad de opciones de configuración cuando se instancia el componentes., y modificarlos en un momento después. Por ejemplo, podemos modificar el contenido de HTML de un panel después de haber sido creado y desplegado. De la siguiente manera
<pre name="code" class="javascript">
var panel = Ext.create('Ext.Panel', {
fullscreen: true,
html: 'Esto es un Panel'
});

//actualizamos el HTML utilizando el metodo setHtml.
panel.setHtml('Contenido HTML nuevo');

//podemos recuperar su contenido mediante getHtml
alert(panel.getHtml()); //alerts 'Contenido HTML nuevo'
</pre>

Opciones de configuración

• baseCls : String
• border : Number/String
• bottom : Number/Boolean
• centered : Boolean
• cls : String
• contentEl : Ext.Element/HTMLElement/String
• data : Mixed
• disabled : Boolean
• disabledCls : String
• docked : String
• draggable : Object
• droppable : Object
• flex : Number
• fullscren : Boolean
• height : Number
• hidden : Boolean
• hideOnMaskTap : Boolean
• html : String/Ext.Element/HTMLElement
• itemId : String
• left : Number/Boolean
• margin : Number/String
• modal : Boolean
• padding : Number/String
• plugins : Object/Array
• renderTo : Ext.Element
• renderTpl : Mixed
• right : Number/Boolean
• style : String/Object
• styleHtmlCls : String
• styleHtmlContent : Boolean
• top : Number/Boolean
• tpl : Mixed
• tplWriteMode : String
• ui : String
• width : Number
• zIndex : Number


Propiedades
• dockPositions : Object READONLY

Métodos

• addCls( String cls, String prefix, String suffix )
• destroy( )
• disable( )
• enable( )
• getBaseCls( ) : String
• getBorder( ) : Number/String
• getBottom( ) : Number/Boolean
• getCentered( ) : Boolean
• getCls( ) : String
• getContentEl( ) : Ext.Element/HTMLElement/String
• getData( ) : Mixed
• getDisabled( ) : Boolean
• getDisabledCls( ) : String
• getDocked( ) : String
• getDraggable( ) : Object
• getDroppable( ) : Object
• getEl( ) : Ext.dom.Element
• getHeight( ) : Number
• getHidden( ) : Boolean
• getHideOnMaskTap( ) : Boolean
• getHtml( ) : String/Ext.Element/HTMLElement
• getItemId( ) : String
• getLeft( ) : Number/Boolean
• getMargin( ) : Number/String
• getModal( ) : Boolean
• getPadding( ) : Number/String
• getPlugins( ) : Object/Array
• getRenderTo( ) : Ext.Element
• getRenderTpl( ) : Mixed
• getRight( ) : Number/Boolean
• getSize( ) : Object
• getStyle( ) : String/Object
• getStyleHtmlCls( ) : String
• getStyleHtmlContent( ) : Boolean
• getTop( ) : Number/Boolean
• getTpl( ) : Mixed
• getTplWriteMode( ) : String
• getWidth( ) : Number
• getXTypes( ) : String
• getZIndex( ) : Number
• hide( )
• isDisabled( ) : Boolean
• isHidden( ) : Boolean
• isXType( String xtype, [Boolean shallow] ) : Boolean
• removeCls( String cls, String prefix, String suffix )
• setBaseCls( String baseCls )
• setBorder( Number/String border )
• setBottom( Number/Boolean bottom )
• setCentered( Boolean centered )
• setCls( String cls )
• setContentEl( Ext.Element/HTMLElement/String contentEl )
• setData( Mixed data )
• setDisabled( Boolean disabled )
• setDisabledCls( String disabledCls )
• setDocked( String docked )
• setDraggable( Object draggable )
• setDroppable( Object droppable )
• setHeight( Number height )
• setHidden( Boolean hidden )
• setHideOnMaskTap( Boolean hideOnMaskTap )
• setHtml( String/Ext.Element/HTMLElement html )
• setItemId( String itemId )
• setLeft( Number/Boolean left )
• setMargin( Number/String margin )
• setModal( Boolean modal )
• setPadding( Number/String padding )
• setPlugins( Object/Array plugins )
• setRenderTo( Ext.Element renderTo )
• setRenderTpl( Mixed renderTpl )
• setRight( Number/Boolean right )
• setSize( Number width, Number height )
• setStyle( String/Object style )
• setStyleHtmlCls( String styleHtmlCls )
• setStyleHtmlContent( Boolean styleHtmlContent )
• setTop( Number/Boolean top )
• setTpl( Mixed tpl )
• setTplWriteMode( String tplWriteMode )
• setWidth( Number width )
• setZIndex( Number zIndex )
• show( )
• showBy( Ext.Component/Ext.Element alignTo )
• up( String selector ) : Ext.Container
• updateStyleHtmlCls( Object newHtmlCls, Object oldHtmlCls )


Eventos

• bottomchange( Ext.Component this, Number/Boolean value, Number/Boolean oldValue, Object eOpts )
• centeredchange( Ext.Component this, Boolean value, Boolean oldValue, Object eOpts )
• disabledchange( Ext.Component this, Boolean value, Boolean oldValue, Object eOpts )
• dockedchange( Ext.Component this, String value, String oldValue, Object eOpts )
• erased( Ext.Component this, Object eOpts )
• floatingchange( Ext.Component this, Boolean floating, Object eOpts )
• fullscreen( Ext.Component this, Object eOpts )
• heightchange( Ext.Component this, Number value, Number oldValue, Object eOpts )
• hiddenchange( Ext.Component this, Boolean value, Boolean oldValue, Object eOpts )
• hide( Ext.Component this, Object eOpts )
• leftchange( Ext.Component this, Number/Boolean value, Number/Boolean oldValue, Object eOpts )
• painted( Ext.Component this, Object eOpts )
• rightchange( Ext.Component this, Number/Boolean value, Number/Boolean oldValue, Object eOpts )
• show( Ext.Component this, Object eOpts )
• topchange( Ext.Component this, Number/Boolean value, Number/Boolean oldValue, Object eOpts )
• widthchange( Ext.Component this, Number value, Number oldValue, Object eOpts )


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

Escribe un comentario en el campo de abajo...