You are on page 1of 20

Aspectos avanzados de Sencha

Touch

ndice
1 Data Model................................................................................................................... 3
1.1 Validaciones.............................................................................................................3
1.2 Crear una instancia de un modelo............................................................................4
1.3 Ms informacin...................................................................................................... 4
2 Data Store..................................................................................................................... 4
2.1 Almacenamiento en local.........................................................................................5
2.2 Almacenamiento en remoto..................................................................................... 5
2.3 Aadir datos............................................................................................................. 6
2.4 Ordenar y Filtrar elementos..................................................................................... 6
2.5 Buscar registros........................................................................................................7
2.6 Eliminar registros.....................................................................................................7
2.7 Ms informacin...................................................................................................... 8
3 Plantillas....................................................................................................................... 8
3.1 Auto-procesado de arrays........................................................................................ 8
3.2 Condiciones..............................................................................................................9
3.3 Visualizacin..........................................................................................................10
3.4 Ms informacin.................................................................................................... 10
4 Data Views................................................................................................................. 10
5 Listados...................................................................................................................... 11
5.1 Obtener datos de la lista.........................................................................................11
5.2 Actualizar datos..................................................................................................... 12
5.3 Agrupar elementos................................................................................................. 12
5.4 Acciones.................................................................................................................13
6 Formularios................................................................................................................ 14
6.1 Cargar datos en un formulario............................................................................... 14

Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.


Aspectos avanzados de Sencha Touch

6.2 Guardar los datos de un formulario....................................................................... 16


6.3 Comprobar validaciones........................................................................................ 17
7 Ms informacin.........................................................................................................18

2
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

1. Data Model

Los modelos de datos nos permiten representar objetos, junto con sus validaciones de
formato y las relaciones que estos tienen con otros objetos. Por comparacin podramos
pensar que un Data Model es como una clase (en POO) con la definicin de los datos que
la componen y funciones para poder validar y trabajar con esos datos.
Para usarlos tenemos que crear una instancia de Ext.regModel(name,
fields_description), en la que primero se indica el nombre del modelo o identificador
(en el ejemplo siguiente sera Users), y a continuacin los campos que lo componen
({idProperty, fields}):

Ext.regModel('Users', { // Nombre del modelo: Users


idProperty: 'id', // Descripcin de los campos que lo componen
fields: [
{ name: 'id', type: 'int' },
{ name: 'usuario', type: 'string' },
{ name: 'nombre', type: 'string' },
{ name: 'genero', type: 'string' },
{ name: 'activo', type: 'boolean', defaultValue: true},
{ name: 'fechaRegistro', type: 'date', dateFormat: 'c' },
]
});

Con idProperty: 'id' definimos el campo que se va a utilizar como identificador


nico. Es recomendable indicarlo siempre porque para algunos tipos de almacenamiento
es necesario.
En la seccin fields se definen el resto de campos que componen el modelo:
name: nombre o identificador del campo.
type: los campos pueden ser de cinco tipos: string, int, float, boolean, date.
defaultValue: atributo opcional que nos permite indicar el valor por defecto de un
campo.
dateFormat: atributo opcional mediante el cual podemos indicar el formato de la
fecha (ver http://docs.sencha.com/touch/1-1/#!/api/Date).

1.1. Validaciones

Los modelos de datos incluyen soporte para realizar validaciones, las cuales las
deberemos de incluir dentro de la misma clase regModel a continuacin del campo
fields. Continuando con el ejemplo anterior:

fields: [ ... ],
validations: [
{field: 'id', type: 'presence' },
{field: 'usuario', type: 'exclusion', list: ['Admin', 'Administrador']},
{field: 'usuario', type: 'format', matcher: /([a-z]+)[0-9]{2,3}/},
{field: 'nombre', type: 'length', min: 2},

3
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

{field: 'genero', type: 'inclusion', list: ['Masculino', 'Femenino']}


]

Los tipos de validaciones que podemos utilizar son los siguientes:


presence: Indica que el campo es requerido.
length: Valida la longitud del campo. Podemos indicar como atributos un mnimo
(min) y/o un mximo (max).
exclusion: Valida que el valor del campo no se encuentre entre la lista de valores
especificados en list.
inclusion: Valida que el valor del campo se encuentre entre la lista de valores
especificados en list.
format: Permite especificar una expresin regular (mediante el atributo matcher) para
validar el campo.
Adems, definiendo definiendo el valor de la propiedad message, podemos cambiar el
mensaje de error que se producira si una validacin no es correcta:

{ field: 'titulo', type: 'presence',


message: 'Por favor, introduzca un ttulo' }

Cuando trabajemos con un formulario y queramos comprobar estas validaciones lo


tendremos que hacer manualmente llamando a la funcin validate(), esta opcin la
veremos ms en detalle en la seccin de formularios.

1.2. Crear una instancia de un modelo

Para crear una instancia de un modelo utilizamos el constructor


Ext.ModelMgr.create(lista_valores, nombre_modelo):

var instance = Ext.ModelMgr.create({


id: 1,
usuario: 'javierGallego',
nombre: 'Antonio Javier Gallego Snchez',
genero: 'Male',
fechaRegistro: new Date()
}, 'Users');

1.3. Ms informacin

Para ms informacin sobre validaciones:


http://docs.sencha.com/touch/1-1/#!/api/Ext.data.validations
Los modelos de datos tambin soportan la creacin de relaciones con otros modelos de
datos, del tipo has-many y belongs-to. Para ms informacin consultar la API:
http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Model

2. Data Store

4
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Los almacenes de datos (data store) se utilizan para encapsular o almacenar los datos de
un modelo dado en la cach del cliente. Estos datos se cargan y escriben utilizando un
proxy. Adems disponen de funciones para ordenar, filtrar y consultar los datos.
Crear un almacn de datos es fcil, simplemente tenemos que indicarle el modelo de
datos a usar y el proxy para cargar y guardar los datos. Dependiendo del proxy que
utilicemos podremos almacenar los datos de forma local o de forma remota:

2.1. Almacenamiento en local

Para este tipo de almacenamiento, el proxy utiliza la nueva funcionalidad de HTML5 de


almacenamiento en local. Esta opcin es muy til para almacenar informacin sin la
necesidad de utilizar un servidor. Sin embargo solo podremos guardar pares clave-valor,
no soporta objetos complejos como JSON (JavaScript Object Notation).
Al usar almacenamiento en local es muy importante que el modelo de datos tenga un id
nico, que por defecto tendr ese nombre de campo (id); en caso de utilizar otro lo
podramos indicar mediante la propiedad idProperty: 'myID'.
Para que el proxy utilice el almacenamiento en local simplemente tendremos que indicar
el tipo (localstorage) y un identificador (usado como clave para guardar los datos).
En el siguiente ejemplo se crea un almacn de datos para el modelo Users que hemos
definido en la seccin anterior. Adems hemos aadido la propiedad autoLoad: true,
muy importante para que se carguen los datos al inicio desde el proxy indicado. Si no lo
hiciramos as el Store inicialmente estara vaco.

var myStore = new Ext.data.Store({


model: 'Users',
autoLoad: true,
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
}
});

Una forma alternativa de instanciar un Store es: Ext.regStore( 'myStore', { ... }


); de forma similar a como lo hacamos con los Data Models.

2.2. Almacenamiento en remoto

En el siguiente ejemplo se crea un almacn de datos que trabaja con ficheros tipo JSON
que estn almacenados en remoto:

var myStore = new Ext.data.Store({


model: 'Users',
autoLoad: true,

5
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

proxy: {
type: 'ajax',
url : '/users.json', // URL remota del fichero
reader: {
type: 'json',
root: 'usersList'
}
}
});

El proxy utiliza AJAX para cargar los datos desde la direccin ./users.json. La
propiedad reader indica al proxy como debe decodificar la respuesta que obtiene del
servidor a travs de la consulta AJAX. En este caso espera que devuelva un objeto del
tipo JSON que contiene un array de objetos con los mismos campos que se indican en el
modelo Users y que adems dicho array tiene como raz usersList. Por simplificar,
si nuestro modelo Users solamente tuviera los campos id y name esperara un fichero
como el siguiente:

{"usersList": [
{
"id": 1, "name": "Javier Gallego"
},
{
"id": 2, "name": "Fran Garca"
}
]}

Para ms informacin sobre JSON:


http://docs.sencha.com/touch/1-1/#!/api/Ext.data.JsonReader

2.3. Aadir datos

Es muy sencillo aadir datos directamente junto a la definicin de un Store, solo tenemos
insertarlos como un array a travs de su propiedad data. Suponiendo que el modelo
Users solo tuviera dos campos (id, name), podramos aadir datos de la forma:

var myStore = new Ext.data.Store({


model: 'Users',
data: [
{id: 1, name: 'Javier Gallego'},
{id: 2, name: 'Fran Garca'},
{id: 3, name: 'Boyan Ivanov'},
{id: 4, name: 'Miguel Lozano'}
]
});

O tambin podemos aadir datos posteriormente llamando a la funcin add del objeto:

myStore.add({id: 5, name: 'Javier Aznar'},


{id: 6, name: 'Pablo Suau'});

2.4. Ordenar y Filtrar elementos

6
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Para ordenar y filtrar los datos usamos las propiedades sorters y filters. En el
siguiente ejemplo se ordenan los datos de forma descendente por nombre de usuario
(tambin podra ser ASC) y se realiza un filtrado por gnero (los filtros tambin admiten
expresiones regulares).

var myStore = new Ext.data.Store({


model: 'Users',
sorters: [
{ property: 'usuario', direction: 'DESC' }
],
filters: [
{ property: 'genero', value: 'Femenino' }
]
});

2.5. Buscar registros

En algunos casos antes de aadir un registro ser necesario comprobar si el registro est
repetido. Para esto podemos utilizar el mtodo findRecord(campo, valor) del Store, el
cual devuelve el registro encontrado o null en caso de no encontrar ninguna coincidencia.
En el siguiente ejemplo se compara el campo id de los datos del Store, con el campo id
del registro a aadir:

if (myStore.findRecord('id', registro.data.id) === null)


{
myStore.add( registro );
}

Otra opcin para buscar registros es la funcin find(campo, valor) la cual devuelve el
ndice del registro encontrado, y posteriormente podramos llamar a getAt(index) para
obtener los datos.

2.6. Eliminar registros

Para eliminar un registro de un Store usaremos la funcin remove(registro), por


ejemplo:

myStore.remove( registro );

Es recomendable comprobar si existe el registro a eliminar, para esto usaremos la funcin


findRecord(). Normalmente el Store estar asignado a algn panel que nos permita ver
los datos (como un listado). Si quisisemos eliminar un registro de este listado, primero
tendramos que obtener el Store usado, a continuacin comprobar si existe el registro y si
es as eliminarlo. Por ltimo habra que sincronizar los datos para que se visualicen, de la
forma:

var store = miListado.getStore();

7
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

if( store.findRecord('id', registro.data.id) )


{
store.remove( registro );
}
store.sync();
miListado.refresh();

Tambin podemos utilizar la funcin removeAt(index) para eliminar los registros de un


Store a partir de su ndice.

2.7. Ms informacin

Para ms informacin sobre los almacenes de datos consultar:


http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Store

3. Plantillas

Las plantillas se utilizan para describir la disposicin y la apariencia visual de los datos de
nuestra aplicacin. Nos proporcionan funcionalidad avanzada para poder procesarlos y
darles formato, como: auto-procesado de arrays, condiciones, operaciones matemticas,
ejecucin de cdigo en lnea, variables especiales, funciones, etc.
Para instanciar un template utilizamos el constructor Ext.XTemplate( template ),
donde template ser una cadena con la definicin del template a utilizar. Posteriormente
podemos utilizar la funcin overwrite(elemento, datos) del template para aplicar un
template con unos datos sobre un elemento dado. En la seccin de Visualizacin se
detalla otra forma de aplicar un template en un panel.

3.1. Auto-procesado de arrays

Para crear un template que procese automticamente un array se utiliza la etiqueta <tpl
for=variable>plantilla</tpl>, teniendo en cuenta que:
Si el valor especificado es un array se realizar un bucle por cada uno de sus
elementos, repitiendo el cdigo de la plantilla para cada elemento.
La plantilla puede contener texto, etiquetas HTML y variables o elementos del
array a sustituir.
Las variables a sustituir se indican de la forma {nombre_variable}, donde
nombre_variable debe de corresponder con el nombre de una de los elementos del
array iterado.
Mediante la variable especial {#} podemos para obtener el ndice actual del array.
En la seccin for="variable" de la plantilla se debe de indicar el nombre de la
variable que contiene el array a procesar, de la forma:
Con <tpl for=".">...</tpl> se ejecuta un bucle a partir del nodo raz.

8
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Con <tpl for="foo">...</tpl> se ejecuta el bucle a partir del nodo foo.


Con <tpl for="foo.bar">...</tpl> se ejecuta el bucle a partir del nodo
foo.bar

Si por ejemplo tenemos el siguiente objeto de datos:

var myData = {
name: 'Tommy Maintz',
drinks: ['Agua', 'Caf', 'Leche'],
kids: [
{ name: 'Toms', age:3 },
{ name: 'Mateo', age:2 },
{ name: 'Salomn', age:0 }
]
};

Podramos mostrar un listado con el contenido de myData.kids indicando en la seccin


for="variable" que procese a partir de la raz del array a procesar (myData.kids):

var myTpl = new Ext.XTemplate(


'<tpl for=".">',
'<p>{#}. {name}</p>',
'</tpl>' );
myTpl.overwrite(panel.body, myData.kids);

Si por ejemplo indicamos que se procese la variable myData y queremos obtener el


mismo resultado, tendramos que modificar el template para que se procese a partir del
nodo kids, de la forma <tpl for="kids">...</tpl>.

var myTpl = new Ext.XTemplate(


'<tpl for="kids">',
'<p>{#}. {name}</p>',
'</tpl>' );
myTpl.overwrite(panel.body, myData);

Si el array solo contiene valores (en el objeto de datos de ejemplo, sera el array
drinks), podemos usar la variable especial {.} dentro del bucle para obtener el valor
actual:

var myTpl = new Ext.XTemplate(


'<tpl for="drinks">',
'<p>{#}. {.}</p>',
'</tpl>' );
myTpl.overwrite(panel.body, myData);

3.2. Condiciones

Para introducir condiciones en las plantillas se utiliza la etiqueta '<tpl

9
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

if=condicion> plantilla </tpl>'. Hemos de tener en cuenta que: si utilizamos las


comillas, deberemos escribirlas codificadas (&quot;), y que no existe el operador
else, si lo necesitamos deberemos de utilizar una condicin if adicional.
Ejemplos:

<tpl if="age > 1 && age < 10">Child</tpl>


<tpl if="age >= 10 && age < 18">Teenager</tpl>
<tpl if="name == &quot;Tommy&quot;">Hello Tommy!</tpl>

3.3. Visualizacin

Para renderizar el contenido de una plantilla sobre un panel (u otro elemento que lo
soporte, como veremos ms adelante), podemos usar la funcin
tpl.overwrite(elemento, datos) que ya hemos usado en los ejemplos anteriores.
O usar la propiedades tpl junto con data, de la forma:

MyApp.views.viewport = new Ext.Panel({


data: myData,
tpl: myTpl
});

3.4. Ms informacin

Para ms informacin sobre las plantillas (operaciones matemticas, ejecucin de cdigo


en lnea, variables especiales, funciones, etc.) consultar directamente la API de Sencha
Touch: http://docs.sencha.com/ext-js/4-0/#/api/Ext.XTemplate

4. Data Views

Los Data Views nos permiten mostrar datos de forma personalizada, mediante el uso de
plantillas y opciones de formato. Principalmente se utilizan para mostrar datos
provenientes de un Store y aplicarles formato utilizando las plantillas XTemplate, como
hemos visto en la seccin anterior. Adems tambin proporcionan mecanismos para
gestionar eventos como: click, doubleclick, mouseover, mouseout, etc., as como para
permitir seleccionar los elementos mostrados (por medio de un itemSelector).
Continuando con los ejemplos anteriores, vamos a crear un DataView para mostrar el
contenido de myStore por medio de plantilla myTpl:

var myDataView = new Ext.DataView({


store: myStore,
tpl: myTpl,
fullscreen: true
});

Esta vista de datos tenemos que aadirla a la seccin items de un panel para poder

10
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

visualizarla en nuestra aplicacin:

MyApp.views.viewport = new Ext.Panel({


items: [ myDataView ]
});

Para ms informacin podis consultar


http://docs.sencha.com/touch/1-1/#!/api/Ext.DataView.

5. Listados

Permiten mostrar datos en forma de listado a partir de una plantilla por defecto de tipo
lista. Estos datos se obtienen directamente de un store (Ext.data.Store) y se mostrarn
uno a uno en forma de listado segn la plantilla definida en itemTpl. Adems
incorpora funcionalidades para gestionar eventos como: itemtap, itemdoubletap,
containertap, etc.
Utilizarlo es muy simple, solo tenemos que definir el store que queremos utilizar, y la
plantilla para cada uno de los elementos con itemTpl:

var myList = new Ext.List({


store: myStore,
itemTpl: '{firstName} ' +
'{lastName}'
});

Es muy importante diferenciar itemTpl de la propiedad tpl que ya habamos visto


(en las que usbamos los XTemplate). En itemTpl se procesa cada elemento del listado
individualmente. Otra diferencia es que tenemos que utilizar como separador para la
concatenacin el smbolo de unin + y no la coma ,.
Una vez creado el listado solo nos faltar aadirlo a un panel para poder visualizarlo:

MyApp.views.viewport = new Ext.Panel({


items: [ myList ]
});

En el store debemos de utilizar la propiedad sorters para ordenar el listado, pues sino
nos aparecer desordenado. Por ejemplo, podramos indicar (en el store) que se ordene
por el apellido sorters: 'lastName'.

5.1. Obtener datos de la lista

Para obtener el almacn de datos asociado a un listado utilizamos la propiedad getStore:

var notesStore = myList.getStore();

Una vez obtenido ya podemos realizar operaciones sobre l como aadir, modificar o

11
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

eliminar algn registro.

5.2. Actualizar datos

Si modificamos el almacn de datos asociado con el listado tendremos que actualizarlo


para que se visualicen correctamente los nuevos datos en el listado. En primer lugar
llamaremos al mtodo sync() del Store para sincronizar los cambios. A continuacin, si
es necesario, ordenamos los datos (pues el registro se habr aadido al final). En el
ejemplo se ordenan de forma descendente por fecha. Por ltimo llamamos al mtodo
refresh() del listado para actualizar la vista.

notesStore.add( registro );
notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
myList.refresh();

5.3. Agrupar elementos

Una propiedad muy til que nos ofrecen los listados es la posibilidad de agrupar los
elementos (como podemos ver en la imagen inferior). Para esto activaremos la propiedad
grouped: true y opcionalmente podremos indicar que se muestre una barra lateral de
navegacin indexBar: true.

12
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Pero para que esta propiedad funcione dentro del store tenemos que indicar la forma de
agrupar los elementos. Tenemos dos opciones:
groupField: 'campo' - para agrupar por un campo (por ejemplo: elementos de
gnero masculino y femenino).
getGroupString: function(instance) {...} - para agrupar usando una funcin.
Esta opcin es mucho ms avanzada y nos permitir agrupar, por ejemplo, usando la
primera letra del apellido (como se muestra en la imagen de ejemplo).
Para obtener el resultado de la imagen de ejemplo anterior, el cdigo quedara:

var myStore = new Ext.data.Store({


model: 'Users',
sorters: 'apellido',
getGroupString: function(instance) {
return instance.get('apellido')[0];
}
});
var myList = new Ext.List({
store: myStore,
grouped : true,
indexBar: true,
itemTpl: '{nombre} {apellido}'
});

5.4. Acciones

Para aadir acciones al presionar sobre un elemento del listado tenemos varias opciones:
itemtap: permite realizar una accin al presionar sobre un elemento de la barra. Este
evento lo debemos definir dentro de la seccin listeners de nuestro Ext.List, de la
forma:

listeners: {
itemtap: function(record, index) { alert( "tap on" + index ); }
}
Donde el parmetro record representa el objeto sobre el que se ha pulsado. Este valor
lo podramos aprovechar para cargarlo directamente en un formulario o realizar
alguna operacin con l.
itemdoubletap: permite realizar una accin al presionar dos veces consecutivas
sobre un elemento. Este evento lo debemos definir dentro de la seccin listeners de
nuestro Ext.List, de la forma:

listeners: {
itemdoubletap: function(record, index){ alert("doubletap on "+index); }
}
Donde el parmetro record representa el objeto sobre el que se ha pulsado.
onItemDisclosure: Boolean / Funcin - esta propiedad admite varios valores. Si
le indicamos el valor booleano true simplemente aadir un icono con una flecha a

13
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

la derecha de cada elemento (como podemos ver en la imagen inferior).

En lugar de un valor booleano, podemos indicarle una funcin. En este caso, adems
de aadirse el icono en cada elemento, tambin se ejecutar la funcin cada vez que se
presiones sobre dicho icono. Solo se capturar cuando se presione sobre el icono, no
sobre toda la barra (como en el caso de itemtap). Un ejemplo de cdigo:

onItemDisclosure: function (record) { alert( "item disclosure" ); }


Donde el parmetro record representa el objeto sobre el que se ha pulsado. En el
siguiente cdigo, al pulsar sobre un elemento de la lista se cargan los datos del
elemento pulsado en un formulario (como veremos ms adelante), y se cambia la vista
para visualizar ese panel.

onItemDisclosure: function( record )


{
MyApp.views.myFormPanel.load( record );
MyApp.views.viewport.setActiveItem(
'myFormPanel',
{ type: 'slide', direction: 'left' });
}

6. Formularios

En esta seccin vamos a ver como podemos cargar, guardar y validar los datos de un
formulario.

6.1. Cargar datos en un formulario

Para insertar datos en un formulario utilizamos el mtodo load( data ) de la clase


FormPanel. En el siguiente ejemplo se crea un formulario con dos campos llamados
title y text y a continuacin se cargan los datos del registro note.

var noteEditor = new Ext.form.FormPanel({


id: 'noteEditor',
items: [ {
xtype: 'textfield',
name: 'title',
label: 'Title',
required: true
}, {
xtype: 'textareafield',
name: 'narrative',
label: 'Narrative'
} ]

14
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

});
noteEditor.load( note );

El mtodo load( data ) recibe como parmetro una instancia de un modelo de datos
(ver seccin Data Model), del cual cargar solamente los campos cuyos nombre coincidan
con los establecidos en el formulario. En este formulario tenemos dos campos: name:
'title' y name: 'text', si cargamos una instancia de un modelo de datos como el descrito
a continuacin, solamente se cargaran los dos campos que coinciden.

Ext.regModel('Note', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'text', type: 'string' }
]
});

En la seccin de "Data Model" ya hemos visto que podemos usar la funcin


Ext.ModelMgr.create(lista_valores, nombre_modelo) para crear instancias de
un modelo de datos. En el siguiente ejemplo se crea una instancia del modelo anterior y
se aade al formulario "noteEditor" que habamos definido anteriormente. En este caso, al
asignar los datos al formulario, solo se cargaran los campos title y text.

var note = Ext.ModelMgr.create({


id: 1,
date: new Date(),
title: 'titulo',
text: 'texto' },
'Note');
noteEditor.load( note );

A continuacin se incluye un ejemplo un poco ms avanzado: Creamos una barra de


herramientas a la que aadimos un botn con el texto Cargar datos. Para este botn
definimos su funcin handler, de forma que al pulsar el botn se crea una instancia del
modelo 'Note' y posteriormente se carga en el formulario 'noteEditor'.

var myToolbar = new Ext.Toolbar({


dock: 'top',
title: 'Mi barra',
items: [{
ui: 'action',
text: 'Cargar datos',
handler: function () {
var now = new Date();
var noteId = now.getTime(); // Identificador numrico nico
var note = Ext.ModelMgr.create({
id: noteId,
date: now,
title: 'titulo',
text: 'texto' },
'Note');
noteEditor.load( note );

15
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

} // End handler function


}] // End items section
});

6.2. Guardar los datos de un formulario

Para guardar los datos de un formulario en general tendremos que seguir cuatro pasos:
1. En primer lugar llamamos al mtodo getRecord() del formulario para obtener su
modelo de datos asociado, el cual devolver un objeto del tipo Ext.data.Model con
la definicin de los campos utilizados en el formulario, pero no sus valores.
2. A continuacin llamamos a la funcin updateRecord(objeto) del mismo formulario
para transferir los valores introducidos a la instancia del modelo que hemos obtenido
antes.
3. En tercer lugar tenemos que realizar el proceso de validacin de los datos (explicado
en el siguiente apartado).
4. Y por ltimo guardar los datos en el Store correspondiente. Si tenemos una instancia
del almacn de datos creada (ver seccin Data Store) podemos aadir los datos
llamando a su funcin add del Store, de la forma:

notesStore.add(currentNote);

En el siguiente cdigo de ejemplo se resumen los cuatro pasos que habra que seguir para
cargar los datos del formulario 'noteEditor' y guardarlos en el almacn 'notesStore'.

// Cargar el modelo de datos


var currentNote = noteEditor.getRecord();
// Actualizar el modelo con los datos del formulario
noteEditor.updateRecord(currentNote);
// Realizar validaciones
// (ver siguiente apartado)
// Guardar los datos
notesStore.add(currentNote);

Ms comnmente nuestro almacn estar asociado con algn elemento que nos permita
visualizar los datos (como un listado o un Data View, ver secciones correspondientes). Si
por ejemplo fuera un listado deberamos de obtener la instancia del almacn de datos
llamando a su mtodo getStore() y posteriormente aadir los datos que habamos
obtenido del formulario, de la forma:

var notesStore = notesList.getStore();


notesStore.add( currentNote );

Opcionalmente podemos comprobar si los datos a aadir estn repetidos. Para esto
tenemos que utilizar el mtodo findRecord() del Store (ver seccin Data Store).

var notesStore = notesList.getStore();

16
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

if( notesStore.findRecord('id', currentNote.data.id) === null)


{
notesStore.add( currentNote );
}

Para terminar con el ejemplo del listado, una vez aadidos los datos tendremos que
sincronizar su Store, ordenarlo (si fuese necesario) y por ltimo actualizar o refrescar la
vista del listado:

notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
notesList.refresh();

6.3. Comprobar validaciones

Para comprobar las validaciones de un formulario lo tenemos que hacer de forma manual
llamando a la funcin validate() del modelo de datos asociado. Para esto tienen que
estar definidas estas validaciones en el modelo. Continuando con el ejemplo del modelo
de datos Note, vamos a aadir que los campos id, title y text sean requeridos:

Ext.regModel('Note', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'text', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title',
message: 'Introduzca un ttulo para esta nota' },
{ type: 'presence', field: 'narrative',
message: 'Introduzca un texto para esta nota' }
]
});

Los pasos a seguir para realizar la validacin de un formulario son los siguientes:
1. Obtener el modelo de datos asociado a un formulario (getRecord()) y rellenarlo con
los datos introducidos por el usuario (updateRecord()).
2. Llamar a la funcin validate() del modelo de datos. Esta funcin comprueba que se
cumplan todas las validaciones que estn definidas en dicho modelo, devolviendo un
objeto del tipo Errors.
3. A continuacin usaremos la funcin isValid() del objeto Errors para comprobar si
ha habido algn error. Esta funcin devuelve un valor booleano indicando si existen
errores o no.
4. En caso de que existan errores tendremos que mostrar un aviso con los errores y no
realizar ninguna accin ms.
Dado que pueden haber varios errores (guardados en el array items del objeto

17
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Errors), tenemos que iterar por los elementos de este array usando la funcin
Ext.each(array, funcion). Esta funcin recibe dos parmetros: el primero es
el array sobre el que va a iterar y el segundo la funcin que se llamar en cada
iteracin. Esta funcin recibe a su vez dos parmetros: el item de la iteracin
actual y el ndice de ese item en el array.
Para mostrar el aviso con los errores podemos usar un MessageBox (ver seccin
correspondiente).
A continuacin se incluye un ejemplo completo de la validacin de un formulario:

// Cargar el modelo de datos


var currentNote = noteEditor.getRecord();
// Actualizar el modelo con los datos del formulario
noteEditor.updateRecord(currentNote);
// Realizar validaciones
var errors = currentNote.validate();
if(!errors.isValid())
{
var message="";
Ext.each( errors.items, function(item, index) {
message += item.message + "<br/>";
});
Ext.Msg.alert("Validate", message, Ext.emptyFn);
return; // Terminamos si hay errores
}
// Almacenar datos
notesStore.add(currentNote);

Tambin podramos haber creado un bucle para iterar entre los elementos del array de
errores, o haber llamado a la funcin errors.getByField('title')[0].message para
obtener directamente el mensaje de error de un campo en concreto.

7. Ms informacin

Podemos consultar principalmente tres fuentes de informacin cuando tengamos alguna


duda:
Los tutoriales y la seccin de FAQ en la pgina Web de Sencha Touch:
http://www.sencha.com/
La documentacin API Online:
http://docs.sencha.com/touch/1-1/
http://www.sencha.com/learn/touch/
Tambin disponible de forma local accediendo en la direccin /docs de tu SDK,
por ejemplo:
http://localhost/touch/docs/

18
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

Los foros en la pgina web de Sencha Touch:


http://www.sencha.com/forum/forumdisplay.php?56-Sencha-Touch-Forums
Adems en la carpeta touch/examples podemos encontrar aplicaciones de ejemplo. Para
comprobar estos ejemplos en nuestro servidor podemos acceder a
http://localhost/touch/examples/, obteniendo:

En GitHub tambin podemos encontrar numerosas aplicaciones de ejemplo bien


documentadas, estas las podemos encontrar en la direccin:
https://github.com/senchalearn/.

19
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.
Aspectos avanzados de Sencha Touch

20
Copyright 2012-13 Dept. Ciencia de la Computacin e IA All rights reserved.

You might also like