KeyMap not working for whole window
It seems that even when using the KeyMap functionality, certain areas of the window to not listen to the KeyMap, such as when you click in the "<Buttons>" area of the following window:
Code:
<ext:Window ID="Window1" runat="server" Collapsible="false" Title="Select File(s)" Modal="true" Showonload="false">
<Body>
</Body>
<Buttons>
<ext:Button ID="btnOk" runat="server" Text="OK">
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Text="Cancel">
<Listeners>
<Click Handler="#{Window1}.hide();" />
</Listeners>
</ext:Button>
</Buttons>
<KeyMap>
<ext:KeyBinding>
<Keys>
<ext:Key Code="ESC" />
</Keys>
<Listeners>
<Event Handler="#{Window1}.hide();" />
</Listeners>
</ext:KeyBinding>
</KeyMap>
</ext:Window>
I thought the KeyMap would mask the issue that hitting the Escape key when certain areas of the window have focus does not have any affect and doesn't close the window. This doesn't seem to work either.
For the current release, is there any code I can add to ensure that no matter where the user last clicked in the window (child controls, caption area, buttons area, etc) a KeyMap on the window can still respond? And, any chance of this being fixed in a future release? This would be more consistent then what is standard functionality (and what users expect) in a desktop app.
Thanks.
RE: KeyMap not working for whole window
The following sample demonstrates adding a <ext:KeyMap> and attaching the 'ESC' key to the main browser document object.
Example
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<script runat="server">
protected void Button_Click(object sender, AjaxEventArgs e)
{
this.Window1.Show();
this.Window2.Show();
}
</script>
<!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 id="Head1" runat="server">
<title>Coolite Toolkit Example</title>
</head>
<body>
<ext:ScriptManager runat="server" />
<ext:KeyMap runat="server" Target="Ext.getDoc()">
<ext:KeyBinding>
<Keys>
<ext:Key Code="ESC" />
</Keys>
<Listeners>
<Event Handler="Ext.WindowMgr.getActive().hide();" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>
<ext:Button runat="server" Text="Show [Listener]">
<Listeners>
<Click Handler="Window2.show();Window1.show();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" Text="Show [AjaxEvent]">
<AjaxEvents>
<Click OnEvent="Button_Click" />
</AjaxEvents>
</ext:Button>
<ext:Window ID="Window1" runat="server" Title="Window1" PageX="100" PageY="100">
<CustomConfig>
<ext:ConfigItem Name="onEsc" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:Window>
<ext:Window ID="Window2" runat="server" Title="Window2" PageX="150" PageY="150">
<CustomConfig>
<ext:ConfigItem Name="onEsc" Value="Ext.emptyFn" Mode="Raw" />
</CustomConfig>
</ext:Window>
</body>
</html>
In the sample above, the key Event Handler logic just grabs an instance of the top most active Window and hides it. You can adjust logic as required for your project. Or, set to a specific instance of window.
Example
Code:
<Event Handler="#{Window1}.hide();" />
I'm pretty sure the above code should work in v0.7.
Hope this helps.
RE: KeyMap not working for whole window
RE: KeyMap not working for whole window
Actually, there is a problem with this if the top window is currently displaying an Ext.Msg.Alert. If you hit escape it closes both the Alert window AND the modal window. It should only close the top most window, in this case it is the Alert window, not the Modal window. If you hit escape again, it should then close the Modal window. Is this a bug? I'm wondering if the windows manager is not accounting for the Alert window as being in the top most position?
