Sencha Touch - Device Profile

In today's world of technologies, we have multiple devices such as mobile, tablet, desktop, laptop with different screen sizes.
So to develop applications which are accessible from all the devices with good look and feel is must need.
As there may be possibilities that some functionalities are required and important only for some specific devices not for all.
If we develop different code for different devices it will be very time consuming and costly.
Sencha touch helps us in this by giving device profile feature so based on the active profile the different dependencies will be run and applicable.
We can declare device profile while writing application code. We can have multiple devices as:

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

Once it is done while loading application profiles will be loaded as:
MyApp.profiles.Phone.js
MyApp.profiles.Tablet.js
Writing a simple phone profile:

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

Writing a simple tablet profile:

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

As we can see in profile we have isActive function which determines if the particular device is active.
If device is active the corresponding dependencies will be loaded and instantiated.
As mentioned in the above example if we are using phone device then phone profile's isActive function will return true and the dependencies related to the phone device will be loaded here phoneView will be loaded. If device is tablet than phone profile's isActive function will return false and tablet profile's isActive function will return true and dependency tabletView will be loaded.

Launch Process

One more point to be noticed here is when we have profiles in application than the loading and instantiation of application code will be in order as:

1. Controllers are instantiated first and each controller's init function will be loaded.
2. Profile's launch function will be called
3. Then application's launch function will be called.

Both profile and application's launch functions are optional, so we do not define any one of them they will not get called.
See the below code to check where and how the different launch and init functions can be defined.

Controller's init function

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});
 

Profile's launch function

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

Application's launch function

Ext.application({
   name: 'Sencha',
   launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});