October 2015 - Posts


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!