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. for all the views, where profileName was either tablet or phone, and xyz was replaced by view name. These views are extended from 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.


Working with Sencha Touch can be great and disastrous at the same time depending upon how you are using it. This week was disastrous for me for many reasons, but the major reason was what I described in the title of this article.

So here is the background, I happen to handle an old code where old Sencha Touch library (2.2 if I am not wrong) is used in accordance with Cordova Tools to develop a mobile app. As if that was not enough, I ported this whole code in Visual Studio environment.

Now, this all was working quite okay until I stumbled upon an alert box. Normally, as soon as the alert box is called, an overlay mask is set on the whole screen and then the alert box is shown. When you click on the Ok, the alert box is gone, and the overlay is removed. However, here came the problem. The alert box was gone of course but the overlay was not removed resulting in the locking of the screen, I couldn't do anything until I refresh the page again which is usually not a easy thing in an app for a user.

After hours of debugging and going through the same code again and again, I realized that this is the bug in the Sencha Touch library itself. This was confirmed by Sencha Touch Forum This problem can also be seen on an old example from Sencha. It has also been mentioned on the forum that this bug is fixed in the latest version of the library starting from 2.3.0-b3.

Well so the actual solution was to just replace the library in my project and hope for the best. However, that's where the second headache started.
I don't really know how and why but the guys who coded it originally created a huge ‘app.js’ file with all the libraries, views, controllers and everything inside it. So removing library option was no longer available, and that's when I turned to a temporary fix.

This was happening in the alert box so I went to Ext.MessageBox. This is usually inside messagebox.js (According to forum) However for me it was inside app.js. It has showAnimation and hideAnimation, in which hideAnimation value is set to {type:'popOut',duration: 250,easing: 'ease-out'},
Remove this and set it to null.

So instead of

hideAnimation: {type:'popOut',duration: 250,easing: 'ease-out'},

you should use

hideAnimation: null,

where 'Ext.MessageBox' is defined.

Why: Usually when the popOut animation is over, the view has display:none. However, in my case this was not none even after messageBox was disappeared. So clearly the hiding animation was not working properly in this case. I set it to none, i.e. completely removed the pop out animation from hiding part of the message box and voila. The problem is gone.


So, lately I am working on Cordova (Or previously known as Phonegap) tools for Visual Studio to build a cross platform application using JavaScript and HTML. I imported some pre-written JavaScript code to Cordova and while it worked for me on Android Emulators, trying to run it on Windows Phone was a bit struggling. While trying to deploy it on Windows device, it threw an exception saying "JavaScript runtime error - Unable to add dynamic content."


After a little more probe (By commenting/uncommenting some lines basically), I realized that it is happening every time I try to dynamically load html page from JavaScript. (Which is also basically what the exception says but I had to do it myself).

When I Googled about it, I found out that when you try to deploy some JS code on Windows devices, Microsoft uses some security principles to prevent un-sanitized markup which literally means adding HTML dynamically such as using innerHTML, outerHTML, document.write (That's where exactly I stumbled) and so on will not be so easy in Cordova when using it on Windows devices. Thankfully I found an MSDN page that states how to tackle this issue.

How: All the code that you are using to load HTML dynamically should be called inside a function of the MSApp called execUnsafeLocalFunction.

Syntax: E.g. I want to use document.write inside my script.

document.write('<meta name="'+example+'" content="'+someContent+'">')

This should be called inside:

MSApp.execUnsafeLocalFunction(function () {
document.write('<meta name="'+example+'" content="'+someContent+'">')

And its works perfect!

More Posts « Previous page