How To Use Profiles In MVC Of Sencha (Sencha Touch+Apache Cordova+Visual Studio)

While working with Sencha Touch, the most interesting part found in Sencha Touch was its MVC architecture. It gives a lot of modularity to this framework especially when you are building light weight cross platform mobile applications. The MVC architecture of Sencha is quite normal with usual Models, Views, and Controllers, however, in Sencha Touch another new thing which is added is Store and Profile. Store is the intermediary between controller and the remote server, and profiles are special ways of using views for different screen sizes. The aim of this article is not to explain the MVC architecture of Sencha Touch. For that, there already exists an excellent article on C-sharpcorner. But to go forward, here is a very crud representation of MVC in Sencha Touch. Please forgive my bad drawing skills.



Let’s talk about the Profiles part of this architecture.

Profiles: In Sencha Touch framework, profiles are used to write views for different devices e.g. for tablet and for phone. This comes quite handy when you are writing cross-platform mobile apps. In my case I am using Sencha Touch with Cordova Platform for cross platform apps with Visual Studio as my development environment. If you are interested in how I set up all this, you could take a look at my previous article on this.

So, let’s not beat around the bush anymore, and let’s dive straight into the profiles view. I will start from where I had left off last time, so it would be good if you have taken a look on it, if not and you basically know how to create a Cordova project in Visual Studio, it would be enough.

Let’s start with adding the profiles. In your Ext.application(), where the code starts, you must declare views controllers, models, and so on. Here you must also declare Profiles. To do so, just add the following:

profiles: [‘Phone’, ’Tablet’],

Before launch: function(). This says that you have two profiles in your application one for tablet and one for phone. I have seen codes with having Desktop profile as well, in case you are really building one app for all devices, but I will only use these two for now. Now, you have created two profiles. To do so, write the following code:

Ext.define('BlankCordovaApp101.profile.Tablet',
{
    extend: 'Ext.app.Profile',
    config:
    {
        name: 'Tablet',
        views: ['Main']
    },
    isActive: function()
    {
        console.log("Tablet view is " + Ext.os.is('Tablet'));
        return Ext.os.is('Tablet');
    },
    launch: function()
    {
        Ext.Viewport.add(Ext.create('BlankCordovaApp101.view.tablet.Main',
        {
            fullscreen: true
        }));
    }
});

So, what are we doing here basically? We have defined two profiles, each has config where you specify the name, and views for this profile. It also has isActive function which checks if the profile is active or not i.e. if the code is running on phone or tablet. And the launch function where you add the view to the viewport.

Note:

If you are adding profile to your Sencha Touch application you should add the views to the viewport not in Ext.application but in profiles. I have given code for tablet profile. Based on this, you can also write it for phone profile.

Now, we have said in the profile that it consists of a view called Main, but we don’t have any. So, let’s create one, or wait. Two. Well, actually, we need to create three. Here is how and why. First, you should create a regular view app.view.Main. Then one for tablet, and one for phone which will extend this main view. Here is how I have created it for tablet:

Ext.define('BlankCordovaApp101.view.tablet.Main',
{
    extend: 'BlankCordovaApp101.view.Main',
    xtype: 'main',
    fullscreen: true,
    config:
    {
        id: 'tabMainView',
        items: [
        {
            xtype: 'button',
            text: 'Button created inside a tablet view',
            ref: 'testBtn'
        }]
    }
});

As you can see it extends from Main view. My main view has nothing but an id.

Ext.define('BlankCordovaApp101.view.Main',
{
    extend: 'Ext.Container',
    xtype: 'Main',
    fullscreen: true,
    config:
    {
        id: 'mainView', //this id can be used for getter setter object in controller refs
    }
});

Note:

Make sure you first create main view and then tablet.main, phone.main. Or you will end up debugging silly things.
As you can see, in my tablet.main view, I have created a button, and this is the interesting thing. I can create the same button with same ref and so on, but with customized dimension for different profiles which ultimately means for different screen sizes. This gives great flexibility in design point of view. You can also use different css classes for different profiles but lets not get into that right now. Best thing is, you can use same models and controllers for all profiles. In our case controller simply invokes a alert box when clicking on button. Here is how:

Ext.define('BlankCordovaApp101.controller.UserController',
{
    extend: 'Ext.app.Controller',
    views: ['BlankCordovaApp101.view.Main'],
    config:
    {
        refs:
        {
            mainView: '#mainView', //Needs hash in front of it
            tstBtn: 'button[ref=testBtn]'
        },
        control:
        {
            tstBtn:
            {
                tap: 'onBtnClick'
            }
        }
    },
    onBtnClick: function()
    {
        console.log("inside on click function");
        var me = this;
        var nav = me.getMainView();
        Ext.Msg.alert("Warning!", "You clicked test button");
    },
});

And that’s all. Here is the result from both the profiles.

Here is the phone view,



And the Tablet view,



And here is when you click on button in any view,



I have also attached the source-code with this article, which is also available on Git. Feel free to have a look.