KeyMap not working for whole window

  1. #1

    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:

    <ext:Window ID="Window1" runat="server" Collapsible="false" Title="Select File(s)" Modal="true" Show&#111;nload="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.
  2. #2

    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

    <%@ 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

    <Event Handler="#{Window1}.hide();" />
    I'm pretty sure the above code should work in v0.7.

    Hope this helps.

    Geoffrey McGill
    Founder
  3. #3

    RE: KeyMap not working for whole window

    Works perfect! Thanks.
  4. #4

    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?

Similar Threads

  1. Replies: 1
    Last Post: May 08, 2012, 8:21 AM
  2. [CLOSED] KeyMap inside Panel not working
    By Fredrik in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 02, 2012, 1:51 PM
  3. [CLOSED] Tooltip and KeyMap is not working on htmlEditor
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 25, 2010, 8:20 AM
  4. [CLOSED] KeyMap in Panel not working in mozilla
    By klavsm in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 17, 2010, 10:19 AM
  5. [CLOSED] Keymap in Desktop Window
    By amitpareek in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Feb 02, 2010, 10:35 AM

Posting Permissions