[CODE] Problems with Ext.LoadMask and Modal Windows

Anyone who has used the Ext.LoadMask object with a modal window (basically a popup that prevents you from interacting with anything outside the window) that spawns another mask will know that there is a known bug in ExtJS that doesn't mask the modal window automatically.

Example:

Say you're looking at an online menu for a restaurant, like something you would see on GrubHub. You select one of the dishes and it pops up another window that asks you what kind of rice you want with it, simultaneously graying out everything around the popup. That rice-selection popup is a "modal window".

Imagine you select your rice choice (white, of course) and press the OK button. A small loading icon appears, a mask appears over the modal window, and a second later the modal window and both masks go away, leaving you on your original menu window, with your dish and rice option selected.

That's what should happen. In ExtJS that second mask doesn't overlay the modal window, meaning you can click things while it is doing work in the background. It probably won't affect the operation, but it's tacky and unprofessional.

I've run into this at work, and an easy solution that worked for me is

Ext.WindowMgr.getActive().setDisabled( true );

That will (usually) get the topmost window, likely the modal window you are looking at, and disable it which causes it to gray out as if masked. Call this right after the user hits the OK button and you should be all set!