1. #11
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    BTW, I looked at Meebo, but I cannot find a modal dialog anywhere, just a bunch of floating windows. Where is the example you mentioned?

  2. #12
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    If you wanted to try something like this, you'd want to preserve the original disabled state of each element, rather than simply enabling them all after hide.
    The code I posted only re-enables those items that were disabled on dialog show.

    I'd say that's the best way to do it. It is basically what's needed. All input items under the mask to be disabled.

    Another option is a document keydown handler enabled when a modal dialog is shown (perhaps by the DialogManager) which stops any keydown event if the target is not within an element of selector ".x-dlg#" + topMostDialog.id

    Where the DialogManager knows which is the topmost Dialog.

    Code:
        if (!Ext.fly(event.getTarget()).findParent(".x-dlg#" + topmostDialog.id, document.body)) {
            event.stopEvent();
        }

  3. #13
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by Animal View Post
    The code I posted only re-enables those items that were disabled on dialog show.
    Right you are. That's what I get for skimming

    I was looking at Element.mask -- I think a truly generic solution should block the keyboard for any section of the DOM that is masked, not just beneath a dialog/window. One complication is that different areas within the source do masking in slightly different ways (not everything goes through Element.mask, some components create their own masks manually). The selector filtering approach might work if you can filter for anything beneath the mask el, but I haven't studied the code enough yet to know how that would work.

  4. #14
    Sencha User
    Join Date
    Jun 2007
    Location
    Location, Location....
    Posts
    21
    Vote Rating
    0
    Tim Siney is on a distinguished road

      0  

    Default


    It struck me a simple solution to this would be to have a listener applied to the dialog div/object which is fired when it looses focus. That way as soon as the user tabbed to an underlying field, the focus would be re-applied to the dialog, making it appear truly modal. The psuedo-code would be thus:

    Code:
    dialog.onBlur(){
    dialog.focus();
    }
    Makes sense to me, but how that would be applied to Ext I don't know. There is some pretty clever Javascript voodoo going on in there, so no doubt it wouldn't be as simple as first appears!

  5. #15
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    For a dialog, something like that might work, but there are other situations to handle aside from just dialogs. I still think that the ideal solution would handle disabling any area that is masked, regardless of whether or not there's something modal happening overhead (could just be a masked data loading operation for example). The only thing that you can really rely on being available in every situation is the mask el itself.

  6. #16
    Ext User
    Join Date
    May 2007
    Posts
    31
    Vote Rating
    0
    kato is on a distinguished road

      0  

    Default


    Quote Originally Posted by brian.moeskau View Post
    BTW, I looked at Meebo, but I cannot find a modal dialog anywhere, just a bunch of floating windows. Where is the example you mentioned?
    Hi Brian, it's when you try to send a message (double click on a nick/user) - it opens up a modal window where tabbing seems to be restricted only to that window's elements.

    here's a simpler example: http://wildbit.com/demos/modalbox/

  7. #17
    Ext User
    Join Date
    May 2007
    Posts
    31
    Vote Rating
    0
    kato is on a distinguished road

      0  

    Default


    Just wondering if this has been resolved in the latest (unreleased) builds yet...

  8. #18
    Ext User
    Join Date
    Aug 2007
    Posts
    20
    Vote Rating
    0
    bearmonger is on a distinguished road

      0  

    Default


    This still doesn't seem to be working in 1.1.1 - are there any updates on progress?

  9. #19
    Ext User
    Join Date
    Aug 2007
    Posts
    20
    Vote Rating
    0
    bearmonger is on a distinguished road

      0  

    Default


    Quote Originally Posted by Tim Siney View Post
    It struck me a simple solution to this would be to have a listener applied to the dialog div/object which is fired when it looses focus. That way as soon as the user tabbed to an underlying field, the focus would be re-applied to the dialog, making it appear truly modal. The psuedo-code would be thus:

    Code:
    dialog.onBlur(){
    dialog.focus();
    }
    Makes sense to me, but how that would be applied to Ext I don't know. There is some pretty clever Javascript voodoo going on in there, so no doubt it wouldn't be as simple as first appears!
    By the way, Tim's suggestion doesn't seem possible as the Dialog class doesn't expose any events for blur and focus.

  10. #20
    Ext User lgerndt's Avatar
    Join Date
    Apr 2007
    Location
    Sunnyvale, CA
    Posts
    48
    Vote Rating
    0
    lgerndt is on a distinguished road

      0  

    Default Tried Animal's suggestion

    Tried Animal's suggestion


    Our QA department really wants this fixed too, and I tried Animals excellent suggestion of disabling the elements, but I found that for anchor tags at least, even though its "disabled" is true, hitting return while that element is focused still behaves enabled