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

portlet extjs4

Question

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

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, así que para organizar mi código y no tener solo un script muy grande, Quiero definir cada componente que necesito en un archivo separado y luego llamarlo en el script principal cuando lo necesite ( Ext.define principalmente los ejemplos, así que es por eso que quiero saber cómo funciona Ext.define para poder adaptar esos ejemplos y hacer que funcionen como yo quiero).

Espero haber sido claro.

Y gracias de antemano por su ayuda.

Answer 1

Ext JS 4 tiene una nueva forma de extender ... se llama Ext.define e incorpora Ext.extend, Ext.reg y Ext.ns que teníamos que hacer en Ext JS 3 y antes en una llamada a un método ...

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

Ext.define toma dos params, 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).

Answer 2

Ext.define (String className, Object data, Function 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
});

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

if(existingTab){

    mainPanel.setActiveTab(existingTab);

}else{

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

Puedes poner cada clase en tu archivo .js por separado; más adelante, en la producción, harás class.js con todas las clases en un archivo .js minificado.

Puedes definir una clase y luego decir:

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