Jun 09, 2014, 9:04 PM
[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.
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 11:37 AM.
Reason: [CLOSED]
Originally Posted by josegarcia
