Ext.define/Ext.extend in Sencha Touch 2

Question

Sto appena iniziando a prendere Sencha Touch 2 MVC. Ho molta esperienza con Ext 3, ma questo è un mondo completamente nuovo.

Non riesco a ottenere molto lontano nella costruzione di una vista. Ho preso il mio codice in due direzioni in base a ciò che ho visto su Internet, e non funziona.

Percorso 1

miei app.js:

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

mio avviso/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); 
      } 
     } 
    } 
); 

Questa carichi senza errori, e posso anche aggiungere elementi del modulo in la sezione di configurazione. Tuttavia, initComponent() non viene mai chiamato in modo inspiegabile, quindi la visualizzazione è assolutamente inflessibile.

Percorso 2

miei app.js:

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

mio avviso/LoginForm.js:

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

Questo flat-out non funziona. Rapporti di Chrome 'Impossibile impostare la proprietà' LoginForm 'di indefinito' ... come mai la vista non è stata definita? Inoltre, dice "Le seguenti classi non sono dichiarate anche se i loro file sono stati caricati: 'BkAdmin.view.LoginForm'. ' Certo sembra dichiarato per me.

Molte domande qui: cosa ho sbagliato nei percorsi sopra? Come posso ottenere initComponent() per essere chiamato in Path 1 e far funzionare il Path 2? Quale codice è meglio quotare, meglio usare?

Grazie!

Answer 1

Percorso 1 è il modo (quasi) corretto. Si dovrebbe usare Ext.define e non Ext.extend (che non funziona molto bene/in modo affidabile) a causa del nuovo sistema di classe (molto simile a Ext JS 4).

Il blocco config viene utilizzato solo per le configurazioni definite nella classe/documentazione per quella classe. Cose come fullscreen, items, cls, style e così via. Qualsiasi altra cosa definita nel blocco config che è non, una configurazione verrà archiviata in instance.config.

Invece, si dovrebbe essere mettere i metodi che si desidera eseguire l'override nell'oggetto configurazione principale in Ext.define:

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

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

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

Sencha hanno anche deprecato initComponent in Sencha touch 2.0. Quando è necessario un metodo chiamato quando la classe viene istanziata, è necessario utilizzare il metodo initialize. Si prega di notare che idealmente non si dovrebbero impostare configurazioni all'interno di initialize a meno che non si abbia davvero bisogno di . Dovresti sempre inserirli nel blocco config.

Infine, è possibile chiamare il metodo esteso di classe utilizzando:

this.callParent(arguments); 

C'è una guida sulle modifiche al sistema di classe tra Ext JS 3.xe 4.x Ext JS disponibili here che potrebbe esserti di aiuto. C'è anche una guida aggiornata al sistema di classe per Sencha Touch 2.x here.