[CLOSED] Keep focus inside window when using tabkey

  1. #1

    [CLOSED] Keep focus inside window when using tabkey

    Hey guys..

    Is there a way to prevent the focus 'leaving' a modal window using the 'TAB' key ?

    I would like to 'keep' the user inside the window (with userform) when they use this key

    Martin
    Last edited by Daniil; Jul 19, 2013 at 11:13 AM. Reason: [CLOSED]
  2. #2
    Hi Martin,

    Here is an example for Ext.NET v1.
    http://forums.ext.net/showthread.php...ll=1#post55413

    The same functionality should be possible to implement with v2. Apparently, the example will require some tweaking to get it working with v2.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi Martin,

    Here is an example for Ext.NET v1.
    http://forums.ext.net/showthread.php...ll=1#post55413

    The same functionality should be possible to implement with v2. Apparently, the example will require some tweaking to get it working with v2.
    Used an other method which seems to work...with one small remark. I can't keep the focus on the button this way. It seems that the keymap handler is triggered after the moment that the 'focus' class is set on the button.

    So when using tab when focused on the 'mcMeldingsGroep' it seems that the class is set on the button before the TAB keypress handler is checked.

    Can you tweak this code so that I can 'reach' the 'tfZoekopdracht' Textfield when using TAB when focussed on the button ?

    <%@ Page Language="C#" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Zoeken</title>
     </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager runat="server" ID="rmSearch">
                <Listeners>
                    <DocumentReady Handler="#{tfZoekOpdracht}.focus();"/>
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport ID="vpSearch" runat="server" Layout="Fit">
            <Items>
                <ext:FormPanel ID="fpSearch" runat="server" Frame="true" BodyPadding="5" AutoScroll="true" IDMode="Static">
                    <FieldDefaults LabelAlign="Right" LabelWidth="100" MsgTarget="Qtip" />
                    <Items>
                        <ext:TextField ID="tfZoekOpdracht" runat="server" AnchorHorizontal="100%" FieldLabel="Zoekopdracht" TabIndex="1" AllowBlank="false" SelectOnFocus="true" />
                        <ext:MultiCombo ID="mcZoeken"  ValueField="ID" Icon="Zoom" DisplayField="Soort" TabIndex="2"
                                    runat="server" SelectionMode="All" AnchorHorizontal="100%" FieldLabel="Zoek in" AllowBlank="false" BlankText="Kies minimaal 1 veld">
                                    <Store>
                                        <ext:Store ID="strZoeken" runat="server" AutoDataBind="true">
                                            <Model>
                                                <ext:Model ID="mdlZoeken" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="Soort" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                            <ListConfig MaxHeight="120" />
                        </ext:MultiCombo>
                        <ext:MultiCombo ID="mcMeldingsGroep"  ValueField="ID" Icon="Zoom" DisplayField="cIssueGroep" TabIndex="3"
                                    runat="server" SelectionMode="All" AnchorHorizontal="100%" FieldLabel="Meldingsgroep" AllowBlank="false" BlankText="Kies minimaal 1 groep">
                                    <Store>
                                        <ext:Store ID="strMeldingsGroep" runat="server" AutoDataBind="true">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="ID" />
                                                        <ext:ModelField Name="cIssueGroep" />
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                            <ListConfig MaxHeight="120" />
                        </ext:MultiCombo>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnZoeken" runat="server" Text="Zoeken" Icon="Find" TabIndex="4">
                            <Listeners>
                               <Click Handler="var valid= #{fpSearch}.getForm().isValid(); if (valid) alert('Valid')" />
                            </Listeners>
                        </ext:Button>
                    </Buttons>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
        <ext:KeyMap ID="KeyMap1" runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">        
            <Binding>
                    <ext:KeyBinding Handler="if (#{btnZoeken}.el.hasCls('x-btn-focus')) #{tfZoekOpdracht}.focus();">
                    <Keys>
                        <ext:Key Code="TAB"/>
                    </Keys>
                </ext:KeyBinding>    
            </Binding>        
        </ext:KeyMap>
        </form>
    </body>
    </html>
  4. #4
    Mark as closed.

    Adding 'SelectOnFocus="true"' in the textfield solved the issue

    Martin

Similar Threads

  1. Replies: 6
    Last Post: Sep 20, 2017, 12:40 AM
  2. Replies: 9
    Last Post: Oct 07, 2010, 6:27 PM
  3. Replies: 1
    Last Post: Aug 25, 2009, 1:45 PM
  4. [HELP] Focus on window
    By snippher in forum 1.x Help
    Replies: 0
    Last Post: Mar 23, 2009, 9:17 AM
  5. [CLOSED] Focus on textfield inside a tab
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 10, 2008, 1:32 PM

Posting Permissions