el carrusel de sencha touch

http://www.extjs.mx/2011/12/23/el-carrusel-de-sencha-touch/

El Carrusel, como el TabPanel, es una manera fantástica de mostrar Paneles intercambiables al usuario. Un Carrusel solo muestra una de las páginas a la vez, pero permite moverte sobre ellos con el movimiento de los dedos de izquierda a derecha. Se utilizan unos puntos pequeños como indicadores para revelar el Panel activo entre un arreglo de varios disponibles.:


Un Carrusel puede orientarse vertical y horizontalmente y es fácilmente configurable. Estos contenedores funcionan como cualquier otro, aquí se muestra un ejemplo de como lo podemos configurar::

  1. Ext.create(‘Ext.Carousel’, {
  2.     fullscreen: true,//pantalla completa
  3.     defaults: {
  4.         styleHtmlContent: true
  5.     },
  6.     items: [
  7.         {
  8.             html : ‘Item 1’,
  9.             style: ‘background-color: #5E99CC’
  10.         },
  11.         {
  12.             html : ‘Item 2’,
  13.             style: ‘background-color: #759E60’
  14.         },
  15.         {
  16.             html : ‘Item 3’
  17.         }
  18.     ]
  19. });


Moviendo el dedo de izquierda a derecha sobre el carrusel, intercambiara los tres elementos definidos arriba. También actualiza el indicador debajo de la pantalla dejando saber al usuario en que posición se encuentra. También podemos definir el carrusel verticalmente:

  1. Ext.create(‘Ext.Carousel’, {
  2.     fullscreen: true,
  3.     direction: ‘vertical’,
  4.     defaults: {
  5.         styleHtmlContent: true
  6.     },
  7.     items: [
  8.         {
  9.             html : ‘Item 1’,
  10.             style: ‘background-color: #759E60’
  11.         },
  12.         {
  13.             html : ‘Item 2’,
  14.             style: ‘background-color: #5E99CC’
  15.         }
  16.     ]
  17. });

Como cualquier otro contenedor, podemos colocar casi cualquier cosa en el carrusel, por ejemplo aquí ponemos una lista y un formulario en un carrusel horizontal

  1. Ext.create(‘Ext.Carousel’, {
  2.     fullscreen: true,
  3.     items: [
  4.         {
  5.             xtype: ‘list’,
  6.             items: {
  7.                 xtype: ‘toolbar’,
  8.                 dock: ‘top’,
  9.                 title: ‘Sencha Touch Team’
  10.             },
  11.             store: {
  12.                 fields: [‘name’],
  13.                 data: [
  14.                     {name: ‘Rob’},
  15.                     {name: ‘Ed’},
  16.                     {name: ‘Jacky’},
  17.                     {name: ‘Jamie’},
  18.                     {name: ‘Tommy’},
  19.                     {name: ‘Abe’}
  20.                 ]
  21.             },
  22.             itemTpl: ‘{name}’
  23.         },
  24.         {
  25.             xtype: ‘fieldset’,
  26.             items: [
  27.                 {
  28.                     xtype: ‘toolbar’,
  29.                     dock: ‘top’,
  30.                     title: ‘Login’
  31.                 },
  32.                 {
  33.                     xtype: ‘textfield’,
  34.                     label: ‘Name’
  35.                 },
  36.                 {
  37.                     xtype: ‘passwordfield’,
  38.                     label: ‘Password’
  39.                 }
  40.             ]
  41.         }
  42.     ]
  43. });