PDA

View Full Version : [CLOSED] Keep focus inside window when using tabkey



CarWise
Jul 18, 2013, 1:55 PM
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

Daniil
Jul 18, 2013, 4:13 PM
Hi Martin,

Here is an example for Ext.NET v1.
http://forums.ext.net/showthread.php?12238&p=55413&viewfull=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.

CarWise
Jul 19, 2013, 8:47 AM
Hi Martin,

Here is an example for Ext.NET v1.
http://forums.ext.net/showthread.php?12238&p=55413&viewfull=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>

CarWise
Jul 19, 2013, 9:40 AM
Mark as closed.

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

Martin