Profile views in Sencha Touch Ext JS are not selected in right way

Last week, I added profiles in my existing MVC Sencha Touch app, which was designed only for tablet view. To make it mobile friendly, I used Sencha's awesome profiles. So what I did was, I replicated all views in tablet and phone profiles, which means basically I created new views, e.g. MyApp.view.profileName.xyz for all the views, where profileName was either tablet or phone, and xyz was replaced by view name. These views are extended from MyApp.view.xyz. I followed Sencha Touch's guidelines to use Profiles while doing so, and thus I was quite confident that this would work great. However, the app always used only phone view regardless of which device I use. If I commented out the phone profile, it used by default the tablet view for all devices. And so even after using Profile functionality, it was only using single kind of view for all devices in my app. After some Googling, I found out the solution.

Solution: In the profiles I was using xtype in the base class and if I don't use the same xtype in profile view classes, only the base view is rendered which is basically nothing but a blank white screen. Why? Because I am not adding the views to viewport inside profile launch application (Don't ask why, that's how the app is developed since the start for various reasons.) instead I use Ext.widget to create the view and add it to Viewport inside Main controller launch function. And there I get the views by xtype.

To fix this, I had to use alias instead of xtype. I used the alias for the base view class. The code looked something like this.
Now in the launch function of your each profile, all you have to do is, set this alias to the views of corresponding profile. The code for this looks like this.

this widget.main is then used with widget.create(widget.main), to create the main view. When you use phone for example, only the phone profile is activated and the alias is set only for the phone profile instead of both. And this solves the problem.

I don't know if anybody has also encountered this problem before, and why specifically I explicitly had to map the widget.main in profiles, but in case it happens in future with somebody, this post should be able to help them.