Un Contenedor tiene todas las habilidades y capacidades de un Componente, pero permite la creación de otros componentes dentro de el. Las aplicaciones se hacen utilizando componentes, regularmente unos dentro de otros. Los contenedores tienen la capacidad de crear Componentes hijos dentro de ellos y almacenar referencia hacia ellos.

La mayoría de las aplicaciones tienen un único Contenedor global llamado Viewport, que toma el espacio de la pantalla completa. Dentro de el hay componentes hijos que probablemente también son contenedores. Por ejemplo, una aplicación de control de correo, debería tener en un Viewport dos hijos, el mensaje del correo y la lista del resto de los mensajes.
Los contenedores proporcionan las siguientes capacidades extra:

• Agregar componentes hijos, instanciarlos y desplegarlos en tiempo de ejecución
• Eliminar y sacar de la vista componentes hijos
• Especificar un Layout

Los layouts determinan como deben los componentes hijos acoplarse y desplegarse en pantalla. En el ejemplo de aplicación de correo, se debería utilizar un HBox layout, de esta manera se puede establecer un panel en el norte y otro en el sur. Hay muchos layouts definidos en Sencha Touch 2, cada uno de ellos podrá ayudarte en alcanzar la posición deseada para la estructura de tu aplicación.

Se recomienda leer la guía de Layouts

Agregando componentes a los contenedores

Como o mencionamos antes, los contenedores son componentes especiales que pueden tener componentes hijos posicionados por un Layout. Veamos el siguiente ejemplo agregando componentes en tiempo de ejecución:
<pre name="code" class="javascript">
//este sera el panel que sera agregado despues
var aboutPanel = Ext.create('Ext.Panel', {
html: 'About this app'
});

//este es el panel principal al que le agregaremos el anterior
var mainPanel = Ext.create('Ext.Panel', {
fullscreen: true,

layout: 'hbox',
defaults: {
flex: 1
},

items: {
html: 'First Panel',
style: 'background-color: #5E99CC;'
}
});


//ahora agregamos el primero dentro del segundo
mainPanel.add(aboutPanel);
</pre>

De hecho hemos creado tres paneles en total. Primero creamos el aboutPanel, donde queremos desplegar cierta información especial al usuario de la aplicación. Después creamos mainPanel, que ya contiene el tercer panel en su configuración items, con un mensaje en duro ("First Panel"). Finalmente, agregamos el primer panel al segundo ejecutando el método add de mainPanel.

En este caso, configuramos el mainPanel con el layout hboxt, preo también le proporcionamos unas configuraciones por defecto. Estas configuraciones se aplican a cada hijo dentro de mainPanel dándole la propiedad flex: 1. El resultado de esto es que cuando se despliega el primero en la pantalla, solo aparecerá un hijo dentro de mainPanel, entonces, ese componente ocupara todo el ancho disponible del padre. Una vez que se ejecute mainPanel.add, el segundo tomara el valor flex = 1, provocando que el ancho de la pantalla sea dividido exactamente en dos.

Igualmente, es posible fácilmente remover los componentes de un contenedor:

mainPanel.remove(aboutPanel);

Después de esta línea de código, todo regresa a como fue en un principio, con el primer panel hijo ocupando todo el ancho disponible


Se recomienda leer la guía Componentes y Contenedores.


Opciones de configuración

• activeItem : Object
• autoDestroy : Boolean
• defaultType : String
• defaults : Object
• items : Array/Object
• layout : Object/String
• mask : Boolean/Object/Ext.Mask/Ext.LoadMask
• scrollable : Boolean/Object


Métodos

• add( Array newItems )
• applyMask( Object mask )
• child( String selector )
• down( String selector )
• getActiveItem( ) : Object
• getAt( Number index ) : Ext.Component
• getAutoDestroy( ) : Boolean
• getComponent( String/Number component )
• getDefaultType( ) : String
• getDefaults( ) : Object
• getItems( ) : Array/Object
• getLayout( ) : Object/String
• getMask( ) : Boolean/Object/Ext.Mask/Ext.LoadMask
• getScrollable( ) : Boolean/Object
• insert( Number index, Object item )
• mask( )
• query( String selector ) : Array
• remove( Object item, Boolean destroy ) : Ext.Component
• removeAll( Boolean destroy ) : Ext.Component
• removeAt( Number index )
• setActiveItem( Object activeItem )
• setAutoDestroy( Boolean autoDestroy )
• setDefaultType( String defaultType )
• setDefaults( Object defaults )
• setItems( Array/Object items )
• setLayout( Object/String layout )
• setMask( Boolean/Object/Ext.Mask/Ext.LoadMask mask )
• setScrollable( Boolean/Object scrollable )
• unmask( )
• updateMask( Object newMask, Object oldMask )

Eventos

• activate( Object eOpts )
• activeitemchange( Ext.Container this, Object value, Object oldValue, Object eOpts )
• add( Object item, Number index, Object eOpts )
• deactivate( Object eOpts )
• move( Ext.Container this, Object item, Number toIndex, Number fromIndex, Object eOpts )
• remove( Object item, Number index, Object eOpts )


Clase base para contenedores
En la jerarquia de herencia, Ext.Container es la clase base para todos los contenedores en sencha touch. La siguiente imagen muestra el conjunto de clases que heredan de Ext.Container

---