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

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

8.
Creando el esqueleto (generate app)

9.
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'],
...
});

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

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

12.
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();
} ...
});

13.
Creamos una vista dinámica

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

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

16.
Minimizar para producción (build production)