hideOnMaskTap and multiple overlay problems

[brianwmunz]

okay, maybe there's an easy solution to this, I'm still pretty new...
So, I have an overlay that pops up when you push a button in the header, and within that overlay, I need the ability to push a button and have another overlay appear. I have code working that does all this, I'm just having trouble with the hideOnMaskTap. If I set it to true, when you tap the second overlay, the first one disappears and the option you selected on the second one is not triggered. If you click on the option again, it works.
So, I'm assuming this means that the mask is overtop of the second overlay, so one click removes it, then you can access it.
So I just want to keep the ability to click outside of the two overlays and have them hide without affecting the ability to choose options on the second overlay. So, essentially move the hideOnMaskTap event from the first overlay to the second and make the second overlay immediately clickable.
I really hope I've made sense here, but I'm finding it hard to explain.
Any help would be greatly appreciated.
Thanks.

[smolin]

I have a similar issue.

When I open a modal (modal: true) overlay (eg just a modal alert) from another modal overlay and click somewhere outside it, the second overlay closes ok. But this also removes overlay mask which appears to be always just single one does not matter how many overlays you have.

So, the first overlay is not modal anymore, as you are able to click outside it. Is there any way to make several modal panels work without such a problem? The similar works fine in ExtJS.

Thanks in advance.

[Marc-QNX]

Has anyone found a solution to this? I am seeing the same problem and I haven't been able to find a workaround.

Instead of using modal overlays, I am using modal sheets.

[Marc-QNX]

Since I could not find a solution, I decided to make one.

First, you will need to edit some Sencha code. Search for the onFloatingTouchStart function in the code and change it as such (add the red part):

    onFloatingTouchStart: function(e) {        if (this.hideOnMaskTap && !this.el.contains(e.target)) {
            this.hide();
            if (this.stopMaskTapEvent || Ext.fly(e.target).hasCls('x-mask')) {
                e.stopEvent();
            }
        }
    },

Next, when you display your second sheet, set your first sheet's hideOnMaskTap property to false.

Finally, add a listener to the hide event of your second sheet to reset your parent sheet's hideOnMaskTap property to true.

And that should do it!

The only issue I found with this solution is that that mask does not get applied over the first sheet when showing the second sheet, and when you dismiss the second sheet, the first sheet's mask gets removed.

I would hope that Sencha apply this functionality behind the scenes in the future, but for now this will get you by. If anyone has a cleaner solution (one that doesn't require modifying the Sencha code) please share.