usando tabpanels en sencha touch

http://www.extjs.mx/2012/01/01/usando-tabpanels-en-sencha-touch/

Los Tab Panels son una excelente manera de mostrar varios paneles al usuario pudiendo intercambiarlos en la pantalla completa. are a great way to allow the user to switch between several pages that are all full screen. Cada componente en el Tab Panel tiene su propia pestaña, permitiendo al usuario visualizarlo presionandolo. Es posible posicionar las pestañas arriba o abajo del TabPanel, y opcionalmente permite configuraciones de icono y texto.
Aqui un ejemplo de configuracion de un TabPanel con sus pestañas en la parte de abajo.

  1. Ext.create(‘Ext.TabPanel’, {
  2.     fullscreen: true,
  3.     tabBarPosition: ‘bottom’,
  4.     defaults: {
  5.         styleHtmlContent: true
  6.     },
  7.     items: [
  8.         {
  9.             title: ‘Home’,
  10.             iconCls: ‘home’,
  11.             html: ‘Home Screen’
  12.         },
  13.         {
  14.             title: ‘Contact’,
  15.             iconCls: ‘user’,
  16.             html: ‘Contact Screen’
  17.         }
  18.     ]
  19. });

Cada tab fue definido como elemento del arreglo items del TabPanel principal. Cada uno utiliza automaticamente el icono y titulo en su configuracion, y los intercambia cuando el usuario presiona las pestañas. Es posible reposicionar las pestañas en el norte del TabPanel, con un código como el siguiente:

  1. Ext.create(‘Ext.TabPanel’, {
  2.     fullscreen: true,
  3.     defaults: {
  4.         styleHtmlContent: true
  5.     },
  6.     items: [
  7.         {
  8.             title: ‘Home’,
  9.             html: ‘Home Screen’
  10.         },
  11.         {
  12.             title: ‘Contact’,
  13.             html: ‘Contact Screen’
  14.         }
  15.     ]
  16. });