Results 1 to 10 of 24

Thread: [2.0.1][OPEN] modal dialog can be bypassed by tab pressing

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    41

    Thumbs up [2.0.1][OPEN] modal dialog can be bypassed by tab pressing

    Hi,
    in reply to this thread: http://extjs.com/forum/showthread.php?t=7964. I've search in the Ext 2.0 forum but I haven't found nothing.
    So, I want to share my personal solution to solve the problem relative to MessageBox... any suggestion or improvement is appreciate.

    PRE: Attach a document event listener onkeypress that handle the tab key press. Bind to this function an object that contains your Ext.Window (yourMessageBox.getDialog()) and a variable used to store the current focused button
    POST: This is the code of the function called by the event handler:
    PHP Code:

    function ensureModalWindow(){
        
    this.currentFocused = ((this.currentFocused+1) % 4);
        while (
    this.buttons[this.retrieveButtonType(this.currentFocused)]===undefined){
            
    this.currentFocused = ((this.currentFocused+1) % 4);
        }
        
    this.winbox.defaultButton this.currentFocused;
        
    this.winbox.focus();

    This is the code of retrieveButtonType:
    PHP Code:
    retrieveButtonType: function(btn_index){
            switch (
    btn_index){
                case 
    0:
                    return 
    "ok";
                case 
    1:
                    return 
    "yes";
                case 
    2:
                    return 
    "no";
                case 
    3:
                    return 
    "cancel";
                default: 
    //not used
                    
    return "";
            }    
        }, 
    this.buttons is an object like this:
    PHP Code:
    {ok"label for button ok"cancel:"label for cancel"
    this.currentFocused is the index of the current button that has focus. Initialize it when creating your MessageBox, like:
    PHP Code:
    var msgbox Ext.MessageBox.show({
               
    title:this.title,
               
    msgthis.message,
               
    buttonsthis.buttons
               
    fnthis.boundProcessResult,
               
    iconthis.messageType
           
    });
    this.winbox msgbox.getDialog();
           
    this.winbox.on('hide', function(){
                    
    /* remove tab keypress handler*/
            
    });
           
    this.currentFocused this.focusedButton;
           if (
    this.focusedButton!=-1){ // set default button with focus
                   
    this.winbox.defaultButton this.focusedButton;
                   
    this.winbox.focus();
           } 
    Remember to remove event listner for tab when close the MessageBox.The solution is only applicable with MessageBox... because you know all kind of buttons you can display.

    I hope it was clear!

    Sorry for my english.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    Thanks, we'll take a look at your suggestions and see if they make sense as a general solution. This is on our list of things to address, but just hasn't made it into a release yet.

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    41

    Default

    OK, thanks for the reply. For me, this is a high priority bug.
    Hope is useful.
    If requested i can give a description more detailed of the solution.

    Bye

  4. #4
    Sencha User
    Join Date
    Nov 2007
    Posts
    243

    Default

    FxMan I hope you realise that modal dialogs can easily just be hidden for example by any browser side css modifier or script modifier!

  5. #5
    Ext User
    Join Date
    Jan 2008
    Posts
    41

    Default

    JamesC... what do you mean exactly?

  6. #6
    Sencha User
    Join Date
    Nov 2007
    Posts
    243

    Default

    Well its not a true modal dialog... I could for example use the IE developer toolbar to hide the mask/dialog and still access the page behind (by changing the styles).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •