Sencha Touch - Migrazione
Sencha Touch viene fornito con varie rettifiche rispetto alla versione precedente.
Sencha Touch 2 viene fornito con la build di compatibilità con le versioni precedenti, che semplifica il processo di migrazione dalla versione 1.x alla 2.x.
Questa build semplifica il lavoro fornendo un avviso e i registri ogni volta che si verifica un problema di migrazione o è richiesta una modifica del codice, in modo che l'utente possa sapere dove sono necessarie le modifiche, per assicurarsi che l'applicazione funzioni con la versione più recente.
La migrazione di Sencha Touch 2.x richiede le seguenti modifiche al codice.
Sistema di classi
Code in Sencha Touch 1.x -
MyApp.view.StudentPanel = Ext.extend(Ext.Panel, {
scroll: 'vertical',
html: 'Student Panel'
initComponent: function() {
Ext.getCmp('StudentIdDiv').update('This is a Student panel');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentPanel', {
extend: 'Ext.Panel',
config: {
scroll: 'vertical',
html: 'Student Panel'
},
initialize: function() {
Ext.getCmp('StudentIdDiv').setHtml('This is a Student panel')
}
});
Guardando entrambe le versioni, puoi vedere il modo per creare la classe sono i cambiamenti che ora sono ispirati da ExtJ come:
Ext.extend viene modificato in Ext.define.
Tutti i parametri di configurazione relativi alla classe sono ora definiti nel parametro config.
Il metodo initComponent viene modificato nel metodo initialize ().
In Sencha Touch 2.x, possiamo avere le funzioni setHtml () e getHtml () per aggiornare html o per ottenere il valore.
Architettura MVC
Il codice Sencha Touch 1.x era modulare e basato sull'architettura MVC. Sencha Touch 2.x segue una sintassi diversa per la scrittura di modello, visualizzazione e controller. Vediamo la differenza dei file di modello, vista e controller nelle diverse versioni.
Modello
Code in Sencha Touch 1.x -
Ext.regModel('MyApp.model.StudentModel', {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.model.StudentModel', {
extend: 'Ext.data.Model', config: {
fields: [
{name: 'name', type: 'string'},
{name: 'age', type: 'int'}
]
}
});
Ext.regModel viene modificato in Ext.define che estende Ext.data.Model.
Tutti i campi sono ora nella sezione di configurazione nella versione 2.x.
Visualizza
Code in Sencha Touch 1.x -
Ext.Panel("studentView", {
items: [{}]
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.view.StudentView', {
extend: 'Ext.tab.Panel',
items: [{}]
});
La vista è quasi la stessa, l'unica modifica è che il nome della vista segue lo spazio dei nomi della versione 2.x come Myapp.view.StudentView e il codice viene scritto nel metodo Ext.define come modello simile.
Controller
Code in Sencha Touch 1.x -
Ext.regController("studentController", {
someMethod: function() {
alert('Method is called');
}
});
Code in Sencha Touch 2.x -
Ext.define('MyApp.controller.studentController', {
extend: 'Ext.app.Controller', someMethod: function() {
alert('Method is called');
}
});
Lo stesso del modello nel controller. Anche Ext.regController viene modificato in Ext.define, che estende Ext.app.Controller.
Applicazione
Code in Sencha Touch 1.x -
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.StudentView');
}
});
Code in Sencha Touch 2.x -
Ext.application({
name: 'MyApp',
models: ['studentModel'],
controllers: ['studentController'],
views: ['studentView'],
stores: ['studentStore'],
launch: function() {
Ext.create('MyApp.view.Main');
}
});
La principale differenza tra la versione 1.x e la versione 2.x è che in 2.x dichiariamo tutti i modelli, le viste, i controller e gli archivi nell'applicazione stessa.