[CLOSED] Problem with modal window and focus

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Problem with modal window and focus

    Our client was complaining about the fact that when you have the focus in a control inside of a modal window, when you tab through controls, the focus at some point leave the window and you start tabing through controls outside ofthe window.

    I implemented this solution and it seemed to work:

    http://forums.ext.net/showthread.php...tabindex/page3

    Now he is complaining that if you click in the bar where the window buttons are placed with the mouse and press tab, it still starts to tab through the controls out of the window.

    Any hint on how to solve this one? I thought about placing a click event on this bar where the buttons are, that when it's clicked a button would be automatically focused, so that when tab is pressed the previous solution would work. But i'm clueless on how to do this.

    Thanks in advance.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MXM.Manager.Web.WebForm1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="~/App_Themes/white/css/tema.css" rel="stylesheet" type="text/css" />
        <link href="~/App_Themes/Portal/default.css" rel="stylesheet" type="text/css" />
        <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 id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="rm1"></ext:ResourceManager>
    
            <ext:KeyMap ID="KeyMap1" 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();
                                            TextField5.focus();
                                        }
                                    } else {
                                        if (TextField5.focused) {
                                            e.stopEvent();
                                            Button1.focus();
                                        }
                                    }" />
                    </Listeners>
                </ext:KeyBinding>
            </ext:KeyMap>
            <div>
    
                <ext:TextField runat="server" ID="erer"></ext:TextField>
                <ext:TextField runat="server" ID="TextField1"></ext:TextField>
                <ext:TextField runat="server" ID="TextField2"></ext:TextField>
                <ext:TextField runat="server" ID="TextField3"></ext:TextField>
                <ext:TextField runat="server" ID="TextField4"></ext:TextField>
                <ext:Window runat="server" ID="win" Modal="true" Width="800" Height="600">
                    <Items>
                        <ext:TextField runat="server" ID="TextField5">
                            <Listeners>
                                <Blur Fn="onBlur" Delay="1"/>
                                <Focus Fn="onFocus" />
                            </Listeners>
                        </ext:TextField>
                        <ext:TextField runat="server" ID="TextField6"></ext:TextField>
                        <ext:TextField runat="server" ID="TextField7"></ext:TextField>
                        <ext:TextField runat="server" ID="TextField8"></ext:TextField>
                    </Items>
                    <Buttons>
                        <ext:Button runat="server" ID="btn1" Text="Ok"></ext:Button>
                        <ext:Button runat="server" ID="Button1" Text="Cancelar">
                            <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="TextField5.focus();" Delay="100" />
                    </Listeners>
                </ext:Window>
    
            </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 17, 2014 at 12:37 PM. Reason: [CLOSED]
  2. #2
    Hi @josegarcia,

    Quote Originally Posted by josegarcia View Post
    Now he is complaining that if you click in the bar where the window buttons are placed with the mouse and press tab, it still starts to tab through the controls out of the window.
    I cannot reproduce that. I tested with FireFox and IE10. After clicking the bottom bar and pressing tab, the Ok button is being focused.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @josegarcia,



    I cannot reproduce that. I tested with FireFox and IE10. After clicking the bottom bar and pressing tab, the Ok button is being focused.
    Sorry, forgot to mention... The problem occurs in Chrome.
  4. #4
    Reproduced.

    What about to focus the button if a user clicks that footer? This listener for the Window could do that.
    <AfterRender Handler="this.footer.on('click', function() { btn1.focus(); });" />
  5. #5
    Quote Originally Posted by Daniil View Post
    Reproduced.

    What about to focus the button if a user clicks that footer? This listener for the Window could do that.
    <AfterRender Handler="this.footer.on('click', function() { btn1.focus(); });" />
    Almost perfect. But it still can tab thorugh controls out of the window if the user clicks in the area inside the window, out of the footer and out out of the fields.

    Tried this:

    <AfterRender Handler="this.footer.on('click', function() { btn1.focus(); }); this.body.on('click', function() { btn1.focus(); });" />
    And it kinda worked, but now if the user clicks the textfields, it will also place the focus in the button : )
    How to avoid that? Or maybe there is a better solution for when the user clicks inside the window.

    Also in my real life window i have a grid... How to know if the grid has focus in the function that treats focus?
    Last edited by josegarcia; Jun 11, 2014 at 3:01 PM.
  6. #6
    You can ignore a click on an input field.
    <AfterRender Handler="this.footer.on('click', function() { btn1.focus(); });
                          this.body.on('click', function(e) {if(!e.getTarget('input')) { TextField5.focus(); } });" />
    Quote Originally Posted by josegarcia View Post
    Also in my real life window i have a grid... How to know if the grid has focus in the function that treats focus?
    Well, a GridPanel by itself is not considered as a focusable component. So, I am not sure how to answer your question.
  7. #7
    Quote Originally Posted by Daniil View Post
    Well, a GridPanel by itself is not considered as a focusable component. So, I am not sure how to answer your question.
    But if you hit tab and the next control is a grid the focus is lost within it somehow...
  8. #8
    Yes, something inside a GridPanel is focusable.

    Could you, please, clarify what you actually need to do with that?
  9. #9
    Let me try to explain. Thi line

    this.body.on('click', function(e) {if(!e.getTarget('input')) { TextField5.focus(); } });
    Solves the problem of clicking inside of the window, redirecting the focus to the text field. But there is a grid within the window, e.getTarget('input') is false when it's clicked, so when user clicks grid the focus is redirected to textfield, and i don't want it to go there, since there is already keboard navigation logic implemented for when the grid is focused (user can navigate the lines of the grid with up and down keys, when enter is pressed a value from the grid is returned to a textfield, etc).

    So, what i need for the body of the modal window is:

    - If user clicks an input field, focus stays on input field
    - If user clicks the grid, focus stays on the grid
    - If user clicks in the space between controls, focus is redirected to a textfield, avoiding the problem of pressing tab and the controls outside of the window being focused.
  10. #10
    Quote Originally Posted by josegarcia View Post
    - If user clicks an input field, focus stays on input field
    - If user clicks in the space between controls, focus is redirected to a textfield, avoiding the problem of pressing tab and the controls outside of the window being focused.
    Please clarify does it not work already?

    Quote Originally Posted by josegarcia View Post
    - If user clicks the grid, focus stays on the grid
    I would recommend to try a similar thing that I did with inputs.
    if(!e.getTarget('input'))
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 5
    Last Post: Apr 20, 2012, 7:20 AM
  2. [CLOSED] Notification from modal window problem
    By xeo4.it in forum 1.x Premium Help
    Replies: 4
    Last Post: Apr 27, 2011, 7:53 AM
  3. [CLOSED] Modal Window Problem with lower Resolutions
    By webppl in forum 1.x Premium Help
    Replies: 8
    Last Post: Jan 28, 2011, 11:09 AM
  4. Replies: 0
    Last Post: Dec 25, 2009, 10:48 PM
  5. Modal window escape key problem
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 20, 2009, 2:00 PM

Posting Permissions