Category Archives: Sencha Touch 2

How to Create a Sencha Touch 2 App, Part 4

http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-4/

This is the fourth part of my tutorial on how to create a Sencha Touch 2 application. In this article, we are going to complete the following tasks:

  • Add the delete note feature to the Note Editor View.
  • Implement the navigation back to the Notes List Container View when the Home button in the Note Editor View is tapped.
  • Modify the Notes List Container View so it renders the notes grouped by date.

Deleting Records from a Sencha Touch Data Store

Read more

How to Create a Sencha Touch 2 App, Part 5

http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-5/

Many of the readers of this tutorial on how to build a Sencha Touch Application have requested a version of the Notes Application that shows how to create components using the config object, instead of the initialize function. In this chapter of the tutorial, we are going to do just that.

Using Sencha Touch’s Config Object to Create the Notes List

The first step we are going to take is consolidate the Notes List Container View and Notes List View into a single View, which we will call Notes List View. This View has the same components that used to exist in the former Views:

Read more

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.

Read more

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.:

Read more

usando dataviews en sencha touch

http://www.extjs.mx/2011/12/22/usando-dataviews-en-sencha-touch/

Un DataView es la manera de desplegar los registros de una aplicación con estilos particulares y dinámicamente basados en las capacidades de un Store. Es ideal para mostrar mucha información y datos del servidor o cualquier otra fuente de datos y es la base de otros componentes como el Ext.List.

Un DataView es un componente muy util en aplicaciones que requieren por ejemplo de las siguientes capacidades:

  • Listar los mensajes de una aplicación de emails
  • Mostrar las ultimas noticias o tweets
  • Colección de recuadros para desplegar los albunes de fotos o albúmenes de un usuario o reproductor de música

Creando un DataView

En pocas palabras un DataView es un Store de datos y un Template (estilo prediseñado) que utilizamos para desplegar cada uno de los registros, por ejemplo:

  1. var equipo = Ext.create(‘Ext.DataView’, {
  2.     store: {
  3.         fields: [‘nombre’, ‘edad’],
  4.         data: [
  5.             { nombre: ‘Jamie Avins’,  edad: 100},
  6.             { nombre: ‘Rob Dougan’,   edad: 21},
  7.             { nombre: ‘Tommy Maintz’, edad: 24},
  8.             { nombre: ‘Jacky Nguyen’, edad: 24},
  9.             { nombre: ‘Ed Spencer’,   edad: 26}
  10.         ]
  11.     },
  12.     itemConfig: {
  13.         tpl: ‘Mi es {nombre} y tengo { edad }años’
  14.     }
  15. });

En este ejemplo definimos todos los datos en duro (localmente) y no con datos remotos traídos de un servidor. Para cada uno de los 5 registros definidos en el Store, el DataView desplegara un componente pasándole el dato de nombre y edad. El componente utilizara el template (tpl) que se proporciono arriba y dibujara los datos remplazándolos por las variables entre llaves.

Read more

usando formularios en sencha touch

http://www.extjs.mx/2011/12/19/usando-formularios-en-sencha-touch/

La mayoria de las aplicaciones requieren datos de entrada por parte del usuario usando formularios. Los formularios en Sencha Touch son extensiones de los formularios nativos de HTML5, con opciones y validaciones adicionales para recolectar y enviar los datos, aunado a una manera facil y practica de colocarlos y agregarles estilos visuales.

Creando un formulario

Un Panel de formulario es una coleccion de campos que proporcionan una conveniente forma de capturar y cargar datos. Usualmente un formulario solo contiene un conjunto de capos que quieres desplegar, ordenados dentro de otros componentes con configuraciones similares a esta:

  1. Ext.create(‘Ext.form.Panel’, {
  2.     fullscreen: true,
  3.     items: [
  4.         {
  5.             xtype: ‘textfield’,
  6.             name : ‘nombre’,
  7.             label: ‘Name’
  8.         },
  9.         {
  10.             xtype: ‘emailfield’,
  11.             name : ‘email’,
  12.             label: ‘Email’
  13.         },
  14.         {
  15.             xtype: ‘passwordfield’,
  16.             name : ‘password’,
  17.             label: ‘Password’
  18.         }
  19.     ]
  20. });

Read more

1 2 3 4