Ext.define/Ext.extend en Sencha Touch 2

Question

Estoy empezando a elegir Sencha Touch 2 MVC. Tengo mucha experiencia Ext 3, pero este es un mundo totalmente nuevo.

No puedo llegar muy lejos en la construcción de una vista. Tomé mi código en dos direcciones según lo que he visto en Internet, y ninguno de los dos funciona.

Path 1

Mis app.js:

Ext.application({ 
     name: 'BkAdmin', 
     views: ['LoginForm'], 
     launch: function() { 
      Ext.create('BkAdmin.view.LoginForm'); 
    } 
}); 

mi punto de vista/LoginForm.js:

Ext.define('BkAdmin.view.LoginForm', { 
     extend: 'Ext.form.FormPanel', 
     config: { 
      fullscreen: true, 
      initComponent: function() { 
         alert('yo!'); 
         BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
      } 
     } 
    } 
); 

Esto carga sin errores, e incluso puede añadir elementos de formulario en la sección de configuración. Sin embargo, initComponent() inexplicablemente nunca recibe llamadas, por lo que la vista es completamente inflexible.

Ruta 2

Mis app.js:

Ext.application({ 
    name: 'BkAdmin', 
    views: ['LoginForm'], 
    launch: function() { 
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); 
    } 
}); 

mi punto de vista/LoginForm.js:

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { 
    fullscreen: true, 
    initComponent: function() { 
       alert('yo!'); 
     BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
    } 
}); 

Este de plano no funciona. Informes de Chrome 'No se puede establecer la propiedad' LoginForm 'de undefined' ... ¿cómo diablos la vista no se definió? Además, dice 'Las siguientes clases no se declaran aunque sus archivos se hayan cargado:' BkAdmin.view.LoginForm '.' Claro me parece declarado.

Muchas preguntas aquí: ¿qué hice mal en las rutas anteriores? ¿Cómo puedo hacer que se llame a initComponent() en la ruta 1 y obtener la ruta 2 para que funcione? ¿Qué código es mejor entre comillas que usar?

Gracias!

Answer 1

La ruta 1 es la manera (casi) correcta. Debería estar usando Ext.define y no Ext.extend (que no funciona muy bien/confiablemente) debido al nuevo sistema de clases (muy parecido a Ext JS 4).

El bloque config solo se usa para las configuraciones definidas en la clase/documentación para esa clase. Cosas como fullscreen, items, cls, style y así sucesivamente. Cualquier otra cosa que se defina en ese bloque config que es no, se almacenará una configuración en instance.config.

En su lugar, debe poner los métodos que desee reemplazar en el objeto de configuración principal de Ext.define:

Ext.define('MyApp.view.MyView', { 
    extend: 'Ext.Component', 

    config: { 
     cls: 'custom-cls', 
     html: 'Some html' 
    }, 

    initComponent: function() { 
     // do something 
    } 
}); 

Sencha también han desaprobado initComponent en Sencha Touch 2.0. Cuando necesite un método llamado cuando se crea una instancia de la clase, debe usar el método initialize. Tenga en cuenta que, idealmente, no debe configurar configuraciones dentro de initialize a menos que realmente lo necesite. Siempre debe ponerlos dentro del bloque config.

Por último, se puede llamar al método extendido de clases mediante el uso de:

this.callParent(arguments); 

Hay una guía sobre los cambios en el sistema de clases entre Ext JS 3.xy 4.x Ext JS disponibles here cuales puede ser de alguna ayuda para usted. También hay una guía actualizada del sistema de clases para Sencha Touch 2.x here.