1. #1
    Ext User
    Join Date
    Nov 2010
    Posts
    4
    Vote Rating
    0
    brianwmunz is on a distinguished road

      0  

    Question hideOnMaskTap and multiple overlay problems

    hideOnMaskTap and multiple overlay problems


    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.

  2. #2
    Sencha User
    Join Date
    Oct 2008
    Posts
    6
    Vote Rating
    0
    smolin is on a distinguished road

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    88
    Vote Rating
    0
    Marc-QNX is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Posts
    88
    Vote Rating
    0
    Marc-QNX is on a distinguished road

      0  

    Default


    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):

    Code:
        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.

Similar Threads

  1. Replies: 2
    Last Post: 26 Nov 2010, 9:57 AM
  2. Overlay close on click event (Sorry, one overlay at a time please!)
    By jeffj in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 17 Nov 2010, 3:54 AM
  3. [CLOSED-166] Overlay problems?
    By djMaxM in forum Sencha Touch 1.x: Bugs
    Replies: 3
    Last Post: 28 Jul 2010, 3:12 AM
  4. Multiple Problems with EditGridPanel in Window
    By Sniper[tb] in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 17 May 2010, 4:53 AM
  5. [1.2.2] Multiple layout problems with Chrome
    By cvs_fif in forum Ext GWT: Bugs (1.x)
    Replies: 8
    Last Post: 27 Feb 2009, 1:55 PM

Thread Participants: 2

Tags for this Thread