Upload
raul-jimenez-ortega
View
2.547
Download
0
Embed Size (px)
DESCRIPTION
Online Demo: http://rauljimenez.info/dev/sencha/ Ejemplo simplificado del proceso de desarrollo de una aplicación muy sencilla con Sencha Touch
Citation preview
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)