[CLOSED] [1.0] Modal window tabindex

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] [1.0] Modal window tabindex

    I have a popup window class based on ext.net.window that I use for different functions throughout my app. The window uses .ContentUrl to load a custom page inside the popup that uses a master page to configure a button ribbon and header. The loaded page will usually contain several controls (ie textboxes) and the button ribbon will have a save and cancel button. See attached

    The trouble I have not been able to resolve is that tabbing through the controls from top to cancel will then take me to the parent page controls (in the example image, that would mean tabbing thru username, password and org fields, and 2 buttons, and all links). Perhaps there is a way to manipulate tabindex to keep focus within the popup. Another possibility was to listen for the onblur of the cancel control and reset the tabindex to 0 (the limitation here is 1. there is no onblur event for button 2. "shift tabbing" off of the first control would mean more code to catch onblur of that control).
    Attached Thumbnails Click image for larger version. 

Name:	forgotpw2.jpg 
Views:	304 
Size:	22.0 KB 
ID:	2263  
    Last edited by Daniil; Apr 26, 2011 at 5:45 PM. Reason: [CLOSED]
  2. #2
    Hi betamax,

    Yes, there is no blur event for Button in ExtJS (honestly, I was too surprised).

    But there is the public .btnEl property of Button.
    http://dev.sencha.com/deploy/dev/doc...n&member=btnEl

    Its type is Ext.Element. So, we can attach blur listener to btnEl and it works.

    But I discovered that there is no way to prevent default browser's TAB key behavior using only blur event. Because browser handles TAB first, then blur event fires.

    I was able to achieve you requirement using three things: KeyMap, focus and blur events of btnEl.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    
        <script type="text/javascript">
            var onFocus = function(e, t, o) {
                this.focused = true;  
            }
            
            var onBlur = function(e, t, o) {
                this.focused = false;  
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="TAB"/>
                </Keys>
                <Listeners>
                    <Event Handler="if (Button1.focused) { 
                                        e.stopEvent(); 
                                        TextField1.focus(); 
                                        Button1.focused = false;
                                    }" />
                </Listeners>
            </ext:KeyBinding>
        </ext:KeyMap>
        <ext:Button runat="server" Text="Show window">
            <Listeners>
                <Click Handler="Window1.show();" />
            </Listeners>
        </ext:Button>
        <ext:Window 
            ID="Window1" 
            runat="server" 
            Modal="true" 
            Height="300" 
            Hidden="true">
            <Items>
                <ext:TextField ID="TextField1" runat="server" />
                <ext:TextField runat="server" />
                <ext:TextField runat="server" />
            </Items>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Some buttom">
                    <Listeners>
                        <AfterRender Handler="this.focused = false;
                                              this.btnEl.on('focus', onFocus, this);
                                              this.btnEl.on('blur', onBlur, this);" />
                        <Click Handler="alert('Hello!');" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Listeners>
                <Show Handler="TextField1.focus();" Delay="100" />
            </Listeners>
        </ext:Window>
        </form>
    </body>
    </html>
  3. #3

    Back tabbing

    That's a pretty good solution. It took a little bit of work to adapt it to my app but I think I 've got it. The one issue you didn't address was:

    2. "shift tabbing" off of the first control would mean more code to catch onblur of that control).
    If you reverse the tabbing direction, you drop from the textbox1 to the parent page. Picky? Yes... but so is QA :)
  4. #4
    Quote Originally Posted by betamax View Post
    The one issue you didn't address was:


    If you reverse the tabbing direction, you drop from the textbox1 to the parent page. Picky? Yes... but so is QA :)
    Picky, but adequate:)

    You could check shift is pressed in Tab listener.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
     
        <script type="text/javascript">
            var onFocus = function(e, t, o) {
                this.focused = true; 
            }
             
            var onBlur = function(e, t, o) {
                this.focused = false; 
            }
        </script>
     
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="TAB"/>
                </Keys>
                <Listeners>
                    <Event Handler="if (!e.shiftKey) {
                                        if (Button1.focused) {
                                            e.stopEvent();
                                            TextField1.focus();
                                        }
                                    } else {
                                        if (TextField1.focused) {
                                            e.stopEvent();
                                            Button1.focus();
                                        }
                                    }" />
                </Listeners>
            </ext:KeyBinding>
        </ext:KeyMap>
        <ext:Button runat="server" Text="Show window">
            <Listeners>
                <Click Handler="Window1.show();" />
            </Listeners>
        </ext:Button>
        <ext:Window
            ID="Window1"
            runat="server"
            Modal="true"
            Height="300"
            Hidden="true">
            <Items>
                <ext:TextField ID="TextField1" runat="server">
                    <Listeners>
                        <Blur Fn="onBlur" />
                        <Focus Fn="onFocus" />
                    </Listeners>
                </ext:TextField>
                <ext:TextField runat="server" />
                <ext:TextField runat="server" />
            </Items>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Some buttom">
                    <Listeners>
                        <AfterRender Handler="this.btnEl.on('focus', onFocus, this);
                                              this.btnEl.on('blur', onBlur, this);" />
                        <Click Handler="alert('Hello!');" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Listeners>
                <Show Handler="TextField1.focus();" Delay="100" />
            </Listeners>
        </ext:Window>
        </form>
    </body>
    </html>
  5. #5

    tabbing behavior in IE

    Have you tested this in IE (IE7 & IE8)? What I am seeing is that the buttons are in the tab rotation, but they don't show that they have focus so the user doesn't know that they have tabbed onto a button.
  6. #6
    Yes, I have.

    I also can't see that button is focused under IE8. But under IE7 it's fine - there is a dotted line.

    I think it's IE8 issue and not related to Ext.Net, please see
    http://forums.ext.net/showthread.php?12060
  7. #7

    CLOSED

    Thanks Danill. Mark as Solved.
  8. #8

    datefield onBlur timing

    I am having trouble with the timing of the code below. I have substituted a datefield for Textfield1 as the first control in the window. In this scenario the Blur event now fires before the KeyMap listener, so "Datefield1.focused" is always "false" (and "Button1" never gets "focus") when tested in the 2nd conditional statement of the Keymap listener.

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
     
        <script type="text/javascript">
            var onFocus = function(e, t, o) {
                this.focused = true; 
            }
     
            var onBlur = function(e, t, o) {
                this.focused = false; 
            }
        </script>
     
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
            <ext:KeyBinding>
                <Keys>
                    <ext:Key Code="TAB"/>
                </Keys>
                <Listeners>
                    <Event Handler="if (!e.shiftKey) {
                                        if (Button1.focused) {
                                            e.stopEvent();
                                            DateField1.focus();
                                        }
                                    } else {
                                        if (DateField1.focused) {
                                            e.stopEvent();
                                            Button1.focus();
                                        }
                                    }" />
                </Listeners>
            </ext:KeyBinding>
        </ext:KeyMap>
        <ext:Button runat="server" Text="Show window">
            <Listeners>
                <Click Handler="Window1.show();" />
            </Listeners>
        </ext:Button>
        <ext:Window
            ID="Window1"
            runat="server"
            Modal="true"
            Height="300"
            Hidden="true">
            <Items>
                <ext:DateField ID="DateField1" runat="server">
                    <Listeners>
                        <Blur Fn="onBlur" />
                        <Focus Fn="onFocus" />
                    </Listeners>
                </ext:DateField>
                <ext:TextField runat="server" />
                <ext:TextField runat="server" />
            </Items>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Some buttom">
                    <Listeners>
                        <AfterRender Handler="this.btnEl.on('focus', onFocus, this);
                                              this.btnEl.on('blur', onBlur, this);" />
                        <Click Handler="alert('Hello!');" />
                    </Listeners>
                </ext:Button>
            </Buttons>
            <Listeners>
                <Show Handler="DateField1.focus();" Delay="100" />
            </Listeners>
        </ext:Window>
        </form>
    </body>
    </html>
  9. #9
    Hi,

    It seems I can't see the issue.

    I run the page you posted. What should I do to reproduce?
  10. #10
    tab backwards (shft+tab)
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] Modal window and form tag
    By sbg in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Oct 28, 2013, 6:39 AM
  2. Replies: 5
    Last Post: Apr 20, 2012, 6:20 AM
  3. [CLOSED] Ext.Window: Question about clicking outside a modal Window
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 07, 2012, 6:00 AM
  4. [CLOSED] X.Msg with Modal Window
    By jwf in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 20, 2011, 9:22 PM
  5. Modal Window
    By erey in forum 1.x Help
    Replies: 0
    Last Post: Mar 29, 2010, 12:06 PM

Tags for this Thread

Posting Permissions