Curso Extjs 4

Curso de ExtJS 4 1. Introduccin 1.
1 Concepto
Para la versin 4, el Ext ya no es una extensin de ninguna otra librera y los desarrolladores de Sencha han decidido soportar nicamente el Ext Core que es una librera semejante a jQuery o Prototype, esta decisin fue tomada para que Sencha Touch (librera para mviles) compartiera cdigo con ExtJS 4, adems de varias otras ventajas.
1.2 Descargando http://www.sencha.com/products/extjs/ http://www.quizzpot.com/2011/09/curso-de-extjs-4/ 1.3 Estructura de Archivos
1.4 Instalacin
1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=iso-88591"> 5. <title>Ext.Panel</title> 6.  7. <link rel="stylesheet" type="text/css" href="../js/Ext/resources/c ss/ext-all.css" /> 8. 9.  10. <script type="text/javascript" src="../js/Ext/ext-alldev.js"></script> 11. 12. <script type="text/javascript" > 13. Ext.onReady(function(){ 14. alert("Ext esta instalado correctamente!"); 15. }); 16. </script> 17. </head> 18. <body> 19. <div id="center"></div> 20. </body> 21. </html>
2. Sistema de Clases (http://www.quizzpot.com/2011/09/creacion-de-clases/) 2.1 Como crear clases

2.1.1.1 Ext.define(Nombre,Configuraciones,Callback); 2.1.1.2 Ext.ClassManager.create(Nombre,Configuraciones,Callback);
2.2 Creacin de una Instancia

2.2.1 2.2.2 Ext.create(Clase,Opciones); Ext.ClassManager.instantiate(Clase,Opciones);
2.3 Convenciones
No es una regla, pero si una convencin nombrar la clase siguiendo el formato camel case, es decir de la siguiente manera: UserPanel, UserGrid, UserForm, UserStore Tambin existe otra convencin que nos recomienda escribir en camel case el objeto raiz de nuestro namespace y todos los paquetes en minscula, de esta manera podremos diferenciar fcilmente entre clases y paquetes, por ejemplo: 1. 2. 3. 4. 5. Bleext.modules.security.roles.controller.Roles Bleext.modules.security.roles.model.Role Bleext.modules.security.roles.store.Roles Bleext.modules.security.roles.view.RolesGrid Bleext.modules.security.roles.view.RolePanel
2.4 Herencia Simple

Ext JS siempre se ha caracterizado por ser una librera orientada a objetos, desde las primeras versiones ha provedo un sistema de creacin de clases y herencia, entre versin y versin ha venido cambiando un poco, pero en la versin 4 ha cambiado considerablemente todo el sistema de clases en Ext. Ya vimos cmo crear clases con el nuevo sistema, ahora estudiaremos la manera de como extender una clase para agregarle funcionalidad extra. Para extender una clase nicamente debemos definir la propiedad extend seguida de la clase de la cual queremos heredar.
view plaincopy to clipboardprint?
1. Ext.define("Bleext.training.UserPanel",{ 2. extend : "Ext.panel.Panel", //<-- Herencia 3. 4. title : "User information", 5. width : 300, 6. height : 300, 7. bodyPadding : 10, 8. html : "Testing!" 9. });
2.5 Sobre escritura de Metodos

Es muy comn que cuando desarrollamos orientado a objetos requiramos agregar funcionalidad extra a los mtodos o especializarlos en alguna tarea especfica de la clase que estamos definiendo. Al sobre-escribir algn mtodo debemos considerar que estamos eliminando el funcionamiento que se heredo, por lo tanto debemos llamar al mtodo de la super clase para no perder nada. Ext JS 4 provee una forma muy sencilla de ejecutar algn mtodo que se ha sobre-escrito, basta con ejecutar el mtodo callParent y automticamente la librera identifica el mtodo correcto.
3. 4. 5.
initComponent : function(){ var me = this;
6. bclase 7. 8. 9.
me.tbar = [{text:"Save"},{text:"Edit"},{text:"Delete"}]; //especializamos la su
me.callParent(); }
//<-- llamada al initComponent de la super clase
9.1 Herencia Multiple

Esta nueva versin (Ext4) ha sido escrita completamente nueva, pensando en ser muy flexible y fcil de aprender, una de las nuevas caractersticas que nos provee esta versin es que ahora podemos hacer herencia mltiple utilizando los mixins, en este tutorial veremos como hacer uso de los mixins y utilizarlos correctamente. 1. Ext.define("Bleext.training.Icon",{ 2. mixins : { 3. floating : "Ext.util.Floating", 4. observable : "Ext.util.Observable" 5. } 6. //...... 7. });
Sobre escribiendo el constructor para utilizar la herencia mltiple constructor:function(option){ Ext.apply(this,option ||{}); this.mixins.gipro.constructor.call(option); }, 9.2 as Loader Paquetes de datos dataView Arquitectura MVC Desktop Ejemplos
10. 11. 12. 13. 14. 15.

Curso Extjs 4

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Curso Extjs 4

Caricato da

Copyright:

Formati disponibili

Curso de ExtJS 4 1. Introduccin 1.

1.2 Descargando http://www.sencha.com/products/extjs/ http://www.quizzpot.com/2011/09/curso-de-extjs-4/ 1.3 Estructura de Archivos

2. Sistema de Clases (http://www.quizzpot.com/2011/09/creacion-de-clases/) 2.1 Como crear clases

2.2 Creacin de una Instancia

2.4 Herencia Simple

2.5 Sobre escritura de Metodos

initComponent : function(){ var me = this;

me.tbar = [{text:"Save"},{text:"Edit"},{text:"Delete"}]; //especializamos la su

//<-- llamada al initComponent de la super clase

9.1 Herencia Multiple

10. 11. 12. 13. 14. 15.

Potrebbero piacerti anche