Sencha Touch - Migração
O Sencha Touch vem com várias retificações da versão anterior.
O Sencha Touch 2 vem com o build de compatibilidade com versões anteriores, o que torna o processo de migração mais fácil da versão 1.x para 2.x.
Esta compilação apenas facilita o trabalho, fornecendo um aviso e os logs sempre que ocorrer qualquer problema de migração ou alteração de código for necessária, para que o usuário saiba onde estão as alterações necessárias para garantir que o aplicativo funcione com a versão mais recente.
A migração do Sencha Touch 2.x requer as seguintes alterações de código.
Sistema de classes
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')
}
});
Olhando para ambas as versões, você pode ver que a maneira de criar classes é mudando que agora é inspirada por ExtJs como -
Ext.extend é alterado para Ext.define.
Todos os parâmetros de configuração relacionados à classe agora estão definidos no parâmetro config.
O initComponent é alterado para o método initialize ().
No Sencha Touch 2.x, podemos ter as funções setHtml () e getHtml () para atualizar o html ou obter o valor.
Arquitetura MVC
O código do Sencha Touch 1.x era modular e baseado na arquitetura MVC. O Sencha Touch 2.x segue uma sintaxe diferente para escrever modelo, visualização e controlador. Vamos ver a diferença dos arquivos de modelo, visualização e controlador em diferentes versões.
Modelo
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 é alterado para Ext.define que estende Ext.data.Model.
Todos os campos vêm na seção de configuração agora na versão 2.x.
Visão
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: [{}]
});
A visão é quase a mesma, a única mudança sendo o nome da visão segue o namespacing da versão 2.x, como Myapp.view.StudentView e o código é escrito no método Ext.define como o modelo.
Controlador
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');
}
});
Igual ao modelo no controlador. Além disso, o Ext.regController é alterado para Ext.define, que estende Ext.app.Controller.
Inscrição
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');
}
});
A principal diferença entre a versão 1.xe a versão 2.x é que na 2.x declaramos todos os modelos, visualizações, controladores e armazenamentos no próprio aplicativo.