¿Cómo usar Ext.define en ExtJS 4?

Soy nuevo en ExtJS 4 y necesito ayuda para entender cómo funciona el Ext.define, por favor.¿Cómo usar Ext.define en ExtJS 4?

De hecho, lo que quiero hacer es algo similar a los portlets en el ejemplo del portal, en mi aplicación necesitaré tantos objetos para agregar en mis diferentes pestañas, para organizar mi código y no tener solo uno script muy grande, quiero definir cada componente que necesito en un archivo separado y luego llamarlo en el script principal cuando lo necesite (usaré principalmente los ejemplos, así que es por eso que quiero saber cómo funciona el Ext.define para adaptarlo esos ejemplos y hacerlos funcionar como yo quiero).

Espero haber sido claro.

Y gracias de antemano por su ayuda.

Fuente

2011-06-09 Armance

Ext.define (String className, los datos de objeto, función createdFn): Ext.Base

Ext.define is used to define a class. Example: 

// creates My.computer.NoteBook Class 
Ext.define('My.computer.NoteBook', { 

    extend:'Ext.panel.Panel', 

    config: { 

      hardware:'Dell', 
      os:'Linux', 
      price:500 
    }, 

    constructor:function(config) { 

      this.initConfig(config); 

      return this; 
    } 
}); 


// creates instance of My.computer.NoteBook Class 
var myComputer = Ext.create('My.computer.NoteBook', { 

    hardware:'MacBook Pro', 
    os:'Mac OS X', 
    price:1800 
});

así, con Ext.define hacer un molde, bruja puede utilizar más tarde en muchos casos. Puede definir ancho, alto, id, css, por lo que luego llama a ese molde/clase. En su caso se puede definir una clase para cada pestaña, y luego, cuando usted hace una función para abrir/crear esa pestaña se puede decir:

if(existingTab){ 

    mainPanel.setActiveTab(existingTab); 

}else{ 

    mainPanel.add(Ext.create('My.computer.NoteBook', {id:tabId})).show(); 
} 
...

Se puede retener cada clase en el archivo .js separadas, más tarde, ¡en la producción crearás class.js con todas las clases en un archivo .js minificado!

Se puede definir una clase y luego decir:

items: Ext.create("My.computer.NoteBook",{ 
     ... 
})

Fuente

2011-06-09 09:58:43

muchas gracias, entiendo la primera parte, realmente no conseguí la segunda, pero puedo usar 'var panel1 = Ext.create ('Ext.app.myPanel', {title: 'panel 1', height: 350}); 'y luego llamarlo en mi pestaña como ese' items: [panel1] '. Ya he logrado hacer esto y he definido un panel y una grilla simple, ** mi problema es ** declarar variables y funciones dentro de él, como en el [ejemplo de filtrado de cuadrícula] (http://dev.sencha.com/deploy/ ext-4.0.1/examples/grid-filtering/grid-filter-local.html) ¿cómo puedo hacer lo mismo en un script separado con ext.define? – Armance

Define su vista, todos sus métodos y propredades en clase, y luego solo crea una instancia en los elementos: Tienes que hacer una instancia en alguna parte. –

gracias, puedo llamarlo sin problemas, pero definirlo es el problema ... recibo errores, eche un vistazo a mi otro [post] (http://stackoverflow.com/questions/6292214/uncaught-typeerror-cannot -call-method-insert-of-undefined) – Armance

Ext JS 4 tiene una nueva manera de extender ... es llamar Ext.define e incorpora Ext.extend, Ext.reg y Ext. ns que tuvimos que hacer en Ext JS 3 y antes en una llamada al método ...

Ext.define('com.sencha.MyPanel', { 
    extend : 'Ext.panel.Panel', 
    alias : 'widget.mypanel', 
    ... 
    ... 
});

Ext.define toma dos parametros, el primero es el nombre completo de la clase (actuará como Ext.ns para crear la ruta y creará el Objeto) y la configuración. En la configuración, especifique qué clase está ampliando utilizando la configuración de extensión. Configura un XType usando la configuración de alias. La configuración de alias es un poco diferente ya que tiene dos partes ... la primera parte es el tipo (widget en este caso) y luego el XType (mypanel).

Fuente

2011-06-23 13:47:53 Kunal

¿Cómo usar Ext.define en ExtJS 4?

Respuesta

Cuestiones relacionadas