Sencha touch - Proceso básico de desarrollo

Framework Javascript para desarrollo web móvil

Raúl Jiménez - @hhkaos

Lo que vamos a hacer

bit.ly/IymjV0

Templates

Templates

Templates

Para el diseño usa

Comandos

sencha generate app [NOMBRE]

sencha generate controller [NOMBRE]

compass compile resources/sass/

sencha app build production

Creando el esqueleto (generate app)

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'],...

});

Definimos el menú

./app/view/Main.js:

Ext.define("PideCurso.view.Main", {extend: 'Ext.tab.Panel',config: { tabBarPosition: 'bottom', items: [

{xtype: 'homepanel'},...],

}});

Creamos una vista estática

./app/view/Home.js

Ext.define('GS.view.Home',{extend: 'Ext.Panel',xtype: 'homepanel',config:{

...html: ['<h1>...']

}});

Creamos un formulario de contacto

./app/view/Contact.jsExt.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();} ...

});

Creamos una vista dinámica

Añadimos el controlador

./app/controller/Main.js: sencha generate controller Main

Ext.application({controllers: ["Main"],...views: ['Main','Home','Contact','Blog'],...

});

Minimizar hoja de estilos/resources/css/app.css

Antes: 435 KB

Después de ejecutar: compass compile resources/sass/

186.1 KB

Minimizar para producción (build production)