Online Demo: http://rauljimenez.info/dev/sencha/ Ejemplo simplificado del proceso de desarrollo de una aplicación muy sencilla con Sencha Touch

1. Framework Javascript
para desarrollo web
móvil
Raúl Jiménez - @hhkaos

2. Lo que vamos a hacer
bit.ly/IymjV0

3. Templates

4. Templates

5. Templates

6. Para el diseño usa

8. Comandos
sencha generate app [NOMBRE]
sencha generate controller [NOMBRE]
compass compile resources/sass/
sencha app build production

9. Creando el esqueleto (generate app)

10. Estructura de la App
./app.js:
Define las vistas de la aplicación y los controladores
Ext.application({
controllers: ["Main"],
...
views: ['Main','Home','Contact','Blog'],
...
});

11. Definimos el menú
./app/view/Main.js:
Ext.define("PideCurso.view.Main", {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [
{xtype: 'homepanel'},...
],
}
});

12. Creamos una vista estática
./app/view/Home.js
Ext.define('GS.view.Home',{
extend: 'Ext.Panel',
xtype: 'homepanel',
config:{
...
html: ['<h1>...']
}
});

13. Creamos un formulario de contacto
./app/view/Contact.js
Ext.define('GS.view.Contact',{
extend: 'Ext.form.Panel',...
config:{
url: 'contact.php',
items: [ ...
xtype: 'textfield',
name: 'name',
label: 'Nombre'
,{
xtype: 'button',
handler: function(){
this.up('contactForm').submit();
} ...
});

14. Creamos una vista dinámica

15. Añadimos el controlador
./app/controller/Main.js:
sencha generate controller Main
Ext.application({
controllers: ["Main"],
...
views: ['Main','Home','Contact','Blog'],
...
});

16. Minimizar hoja de estilos
/resources/css/app.css
Antes: 435 KB
Después de ejecutar: compass compile resources/sass/
186.1 KB

17. Minimizar para producción (build production)