Está en la página 1de 47

Taller de introduccin

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Caractersticas generales:

Framework javascript para construir aplicaciones RIA. Crecimiento y actualizacin constante. Crossbrowser. Ms de 20 widgets modernos y ricos en funcionalidad. Claro y definido modelo de componentes. Modelo orientado a la extensibilidad. API completa y comunidad activa.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Caractersticas generales:

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Herramientas de apoyo:

Ext Designer: Aplicacin de escritorio que ayuda a crear interfaces de manera rpida en un ambiente fcil de usar y en modo drag & drop.
Permite disear y ensamblar rpidamente componentes. WYSING Provee de conectividad a datos permitiendo poblar las UIs en diseo.
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Integracin con plataformas:

Independencia del backend. Intercambio de datos va JSON o XML. RESTful ready.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Instalacin:

Una vez descargado el paquete desde http://www.sencha.com se debe descomprimir el contenido e incluir las libreras base para permitir instanciar el objeto Ext en una pgina web. Los archivos mnimos requeridos son: [directorio ext]/resources/css/ext-all.css [directorio ext]/adapter/ext/ext-base.js [directorio ext]/ext-all.js

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Vista al descomprimir el paquete:

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Y porqu tantos ext-all ?:

Los archivos ext-all.js representan la totalidad del framework en un solo archivo. Diferencias entre: ext-all.js ext-all-debug.js ext-all-debug-w-comments.js

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Inicializacin simple:

Para inicializar Ext se debe invocar el siguiente cdigo en un tag script o en un archivo js includo en el html. Ext.onReady(function(){ //ya puedo invocar a Ext!! });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 1 !!

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Introduccin al modelo de componentes:

Ext.util.Observable Ext.Component Ext.Panel Ext.Window

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
El objeto config:

Representa la entrega de configuracin para la instanciacin de objetos en ExtJS. La figura estructural es: { [propiedad] : [valor|funcin]}
new Ext.Button({ renderTo: Ext.getBody(), text : 'Abrir ventana' });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.Panel:
Panel es un container que tiene una funcionalidad especfica: permitir alojar bloques de otros componentes para disear aplicaciones orientadas a interfaces de usuario. Un Panel por virtud de la herencia de Ext.Container, capaz de ser configurado con un layout y contener componentes hijos. Pueden contener top y bottom toolbars. Y muchas configuraciones adicionales. new Ext.Panel({ objeto config });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.Panel:
Layouts: column, form, panel, fit, table, card, etc. Toolbars: barras alojadoras de componentes. Top se alojan en la zona superior del panel Bottom se alojan en la zona inferior del panel Objetos default, separators, fills Una caracterstica es que se renderea a un contenedor o a un elemento HTML, por medio del mtodo render()

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.Button:
Son inherentes al objeto Panel, pero su uso es masivo en esta clase de componentes. Son los handlers una de sus caractersticas ms importantes, ya que definen comportamiento. new Ext.Button({ renderTo: Ext.getBody(), text : 'Abrir ventana' });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.Button:
Su implementacin en un toolbar existente en un Panel, puede darse de la siguiente forma:
new Ext.Panel({ //toolbar tbar : [{ //declaracin del botn text: Nombre del botn, //handler handler: function(){ alert(hola); } }] });
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.MessageBox: Componente de alerta y decisin.
Ext.Msg.show({ title:'Save Changes?', msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?', buttons: Ext.Msg.YESNOCANCEL, fn: processResult, icon: Ext.MessageBox.QUESTION });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.Window: Es un Panel que flota En vez de render(), tiene show()
var window = Ext.Window({ title:Window !', buttons: [{ text: Cerrar }] }); window.show();

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Diferencias entre xtypes y new(): Son formas similares de instancias componentes, pero existe una diferencia funcional que tiene impacto a nivel de performance. El operador new() instancia un objeto de manera instantnea. El modo xtype, instancia el objeto solamente cuando el componente padre es instanciado y renderizado al browser.
var window = new Ext.Window({ title:Window !', buttons: [{ xtype: button, text: Cerrar }] }); window.show();
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Events y listeners: La gran mayora de los componentes, implementan la interface Observable, por lo tanto, todos ellos disparan eventos. Eventos de ejemplo pueden ser: click, select, load, etc. Las funciones que manejan esos eventos, se llaman listeners. Existen dos formas de capturar los eventos por medio de los listeners: 1. En la misma declaracin del componente. 2. Mediante el listener on.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Events y listeners: invocaciones. 1. En la misma declaracin del componente.
new Ext.Button({ listeners: { click : function(){ alert(Cliqueaste el botn); } } });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Events y listeners: invocaciones. 2. Mediante el listener on.
Var b = new Ext.Button({ });

b.on(click, function(){ alert(cliqueaste el botn); });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 2 !!

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.form.FormPanel:
Es el contenedor estndar de formularios y sus elementos. Configurado por default con layout form. Extiende de BasicForm Posee mtodos integrados de validacin, carga y envo de datos. new Ext.form.FormPanel({ objeto config });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.form.FormPanel:
Es posible todos los elementos del paquete form, entre los que destacan: 1. Textfields 2. Datefields 3. Textareas 4. Spinners 5. Combos 6. Composite fields 7. Etc.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Componente Ext.form.FormPanel:
Los mtodos ms utilizados son: 1. getForm() Recupera una instancia del BasicForm para la utilizacin de isValid(), submit() y load(), entre otros. 2. isValid() Valida el formulario, segn las contraints definidas para cada elemento contenido. 3. submit({config}) Hace el submit del formulario. Puede hacer un submit tradicional o a un backend va REST o similar. 4. load({}) Carga un formulario desde un backend REST o similar. 5. loadRecord(Record) Carga un formulario por medio de un Record.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 3 !! Break?

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.extend y la reutilizacin:
Hasta ahora hemos trabajado los componentes Ext directo desde archivos JS o invocndolos directamente desde el HTML. El problema es como encapsulamos nuestra implementacin en una componente que sea reutilizable. Ext.extend permite una forma fcil de crear clases en Javascript que extienden de componentes Ext.

Algunos conceptos previos: Namespace Scope UI y Behavior

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.extend y la reutilizacin:
Namespace: por medio del singleton Ext.ns([nombre del namespace]); permite establecer un espacio de nombres comn para componentes OOP. Scope: IMPORTANTE! En javascript, el contexto existe en la variable this. Este contexto no es pasado de manera automtica en la medida que se anidan objetos config. Ext provee de una forma de entrega del scope a componentes anidados, pero es manual.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.extend y la reutilizacin:
UI y Behavior: en EXE, al crear componentes mediante Ext.extend() y que consiste en la separacin, en 2 archivos javascript, del cdigo implementado. Un archivo [tipoComponenteNombreComponente].ui.js Un archivo [tipoComponenteNombreComponente].behavior.js En el UI: se extiende del componente Ext genrico y se programa todo el armado de componentes a nivel grfico, sin funcionalidad. En el behavior: se extiende del componente UI, se declaran los eventos y se implementan sus handlers con lgica.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 4 !!

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
Entendiendo JSON: JSON, acrnimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos. JSON es un subconjunto de la notacin literal de objetos de JavaScript que no requiere el uso de XML. (Wikipedia ) Ejemplo de JSON: (similitudes?)
{

nombre : Pablo apellido : Voss datos : { sexo: ?, edad: 20 }


}
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
Entendiendo JSON: Todas las peticiones AJAX en Ext, requieren de un JSON mnimo esperado, el cual debe retornar (con algunas variaciones mnimas)
{ success : true // o false, siempre debe venir // otros datos datos : { sexo: ?, edad: 20 }

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
Ext.Ajax: Request global de AJAX que provee una manera simple de realizar ajax requests con una gran flexibilidad.
Ext.Ajax.request({ url: 'algo.php', method: 'POST', success: function(response, opts){ console.log(response); }, failure: function(response, opts){ console.log(response); }, params: { parametro1: 'valor1' } });
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
Ext.util.JSON: Singleton utilitario que permite codificar y decodificar elementos desde y hacia JSON.
Ext.decode(response); //convierte a objeto el JSON retornado desde el backend var array = new Array(array(hola), array(1)); Console.log(Ext.encode(array));

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
form.submit: Mtodo que permite enviar a un backend REST o similar, los elementos que se contienen en un formulario.
miForm.getForm().submit({ url : url destino, method : POST, //o GET o PUT o DELETE si es RESTful success : function(){} //para manejar la respuesta exitosa failure : function(){} //para manejar la respuesta fallida });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Ext.Ajax y widgets de integracin:
form.load: Mtodo que permite invocar un procedimiento de backend como un servicio REST, el cual puede retornar un JSON que permita poblar automticamente el formulario.
miForm.getForm().load({ url : url destino, method : POST, //o GET o PUT o DELETE si es RESTful success : function(){} //para manejar la respuesta exitosa failure : function(){} //para manejar la respuesta fallida });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 5 y 6 !! Break?

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Proxies, Records y Stores:
Proxies: Representan la abstraccin en la invocacin de una llamada AJAX, en ExtJS. Existen los siguientes tipos:
HttpProxy ScriptagProxy MemoryProxy DirectProxy

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Proxies, Records y Stores:
Records: encapsula la definicin de cierta informacin, en una estructura conocida para los elementos que utilizan Stores para mostrar la data.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Proxies, Records y Stores:
Stores: clase que encapsula un cach de cliente de objetos tipo Record, lo que representa el input para componentes como GridPanel, ComboBox y Dataview. Es posible recuperar y leer data, mediante una serie de mtodos. Tipos de store: var myStore = new Ext.data.ArrayStore({ ArrayStore fields: [nombre', email'], JsonStore idIndex: 0 DirectStore }); GroupingStore XmlStore

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Widgets que utilizan Stores:
ComboBox: lista desplegable que tiene soporte para autocomplete, carga remota, paginacin y un montn de funcionalidades ms.
var combo = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', mode: 'local', store: new Ext.data.ArrayStore({ id: 0, fields: [ 'myId', 'displayText' ], data: [[1, 'item1'], [2, 'item2']] }), valueField: 'myId', displayField: 'displayText' });
Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 7 !!

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Widgets que utilizan Stores:
Grid: clase que representa la interfaz primaria de un componente basado en un control tipo grilla para representar data en formato tabular de filas y columnas.

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Widgets que utilizan Stores: Grid
var grid = new Ext.grid.GridPanel({ store: new Ext.data.Store({ autoDestroy: true, reader: reader, data: xg.dummyData }), colModel: new Ext.grid.ColumnModel({ defaults: { width: 120, sortable: true }, columns: [ {id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}, {header: 'Price', renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: 'Change', dataIndex: 'change'}, {header: '% Change', dataIndex: 'pctChange'}, // instead of specifying renderer: Ext.util.Format.dateRenderer('m/d/Y') use xtype { header: 'Last Updated', width: 135, dataIndex: 'lastChange', xtype: 'datecolumn', format: 'M d, Y' } ], }), sm: new Ext.grid.RowSelectionModel({singleSelect:true}), width: 600, height: 300, frame: true, title: titulo', iconCls: 'icon-grid' });

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Ext JS
Taller 8 !!

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl

Fin

Los Leones 382 Of. 102 ProvidenciaSantiago-Chile Fono: (562) 335 30 37 Fax: (562) 234 44 76 Email: exe@exe.cl Web: http://www.exe.cl