Overlay mask is not destroyed after closing the Alert box in Sencha Touch

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.