Sencha Touch - Migration

Sencha touch comes with various rectification from the earlier version.
Sencha touch 2 comes with the backward compatibility build which makes the migration process easier from version 1.x to 2.x.

When we talk about build it does not mean we do not need to any thing and the build will take care of every thing, this build just makes the work easier by providing the warning and the logs whenever any migration issue occurs or code change is require, so user will get to know where the changes are must to make sure application works with the latest version.
Sencha Touch 2.x migration requires mainly following code changes:

Class System

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')
    }
});

By looking at both the version you can see the way to create class is changes which is now inspired by ExtJs such as :

1. Ext.extend is changed to Ext.define.
2. All the configuration parameters related to the class are now defined under config parameter.
3. the initComponent is changed to initialize() method.
4. Now in sencha touch 2.x we can have setHtml() and getHtml() functions to update html or to get the value.

MVC Architecture

Even sencha touch 1.x code was modular and based on MVC architecture now in Sencha touch 2.x follows different syntax for writting model, view, controller. Lets see the difference of model, viwe and cotroller files in different versions.

Model

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'}
     ]
   }
});

1. Ext.regModel is changed to Ext.define which extends Ext.data.Model.
2. All the fields comes under config section now in 2.x version.

View

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: [{}]
});  

View is almost same only change is now the view name follows the 2.x version namespacing such as Myapp.view.StudentView and code is writting in Ext.define method as like model.

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');
   }
});

Same as model in controller also the Ext.regController is changed into Ext.define which extends Ext.app.Controller.

Application

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');
    }
});

The major difference between version 1.x and version 2.x is, in 2.x we declare all model, views, controllers, stores in application itself.

---