[CLOSED] KeyMap issue

Z · Jun 05, 2017, 2:51 AM

Support,

Please explain why this simple example doesnt activate the debugger in the keymap handler?

Also, when i type some text and press ENTER, it submits something. What is it submitting and why?

I saw the 4.2.0 issue with keymaps but it was related to grids....
Thanks,
/Z


<%@ Page Language="C#" %>


<!DOCTYPE html>


<html>
<head id="Head1" runat="server">
    <link href="/resources/css/examples.css" rel="stylesheet" />   
    
    <script>
  


    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>




        <ext:Window 
            ID="Window1"
            runat="server" 
            Closable="false"
            Resizable="false"
            Height="500"
            Title=""
            Header="false"
            Border="false"
            Plain="true"
            Width="425"
            Modal="true"
            Layout="AbsoluteLayout"
            Padding="5">        
            <LayoutConfig>
                <ext:AbsoluteLayoutConfig  ReserveScrollbar="false"/>
            </LayoutConfig>
            <ext:KeyMap runat="server">
                <Binding>
                    <ext:KeyBinding Handler="debugger;Ext.getCmp('TestButton').fireEvent('click')">
                        <Keys>
                            <ext:Key Code="ENTER"/>
                        </Keys>
                    </ext:KeyBinding>
                </Binding>
            </ext:KeyMap>
            <Items>
                <ext:FormPanel 
                    ID="MyForm"
                    runat="server" 
                    Border="false"
                    Height="500"
                    Padding="30"
                    BodyStyle="background:transparent;" >
                    <Items>
                        <ext:TextField 
                            ID="werwerewr" 
                            runat="server" 
                            AllowBlank="false"
                            HideLabel="true"    
                            BlankText="Test"
                            Text="">
                        </ext:TextField>


                        <ext:Button 
                            runat="server"
                            ID="TestButton"
                            TextAlign="Center"
                            Text="Test"
                            Border="true"
                            PaddingSpec="8 0 8 0"
                            Width="350"
                            FormBind="true">
                            <Listeners>
                                <Click Handler="debugger;Ext.net.Mask.show({ msg : 'Test...' });" />
                            </Listeners>
                        </ext:Button>
                    </Items>


                </ext:FormPanel>
            </Items>
        </ext:Window>
     
    </form>
</body>
</html>

**fabricio.murta** · Jun 05, 2017, 10:40 AM

Hello @Z!

There are at least two problems on your sample:
1. The KeyMap is written as ext:KeyMap inside the window block. Nothing will get output at all. Same would happen if you used ext:Loader instead of Loader in a window/panel. Try removing/commenting the block and having intellisense complete it: you would get KeyMap and Loader but nothing starting with ext:.

2. They KeyMap is broken when used inside components. For that issue (and workarounds) please follow this forum thread: Keymap in gridpanel not working.

It works fine if you define it outside and target your component, though.

The reason the window component accepts either ext:KeyMap and ext:Loader inside the immediate block is because both KeyMap and Loader keys match the type. But if you do that, the component enclosed by the ext:-prefixed block won't be rendered at run time as it does not get indexed for translation.

In other words, a component is not expected to be there and needs to be wrapped by extra code, and is what the KeyMap or Loader block constructs do although they look like the same, just without the ext: prefix.

I hope this helps!

Z · Jun 05, 2017, 7:51 PM

I had it outside the component but that didn't work either. then i also get JS error that target is null.

can you please post a working example using my posted sample as a base pls.

just too confusing with so many issues.

/Z

**fabricio.murta** · Jun 06, 2017, 3:32 PM

Based on your example above, this is what would do.

Notice I had to force out the button from handling the enter key event as it gets precedence to map the enter key to the click event on it.

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window 
            ID="Window1"
            runat="server" 
            Closable="false"
            Resizable="false"
            Height="500"
            Title=""
            Header="false"
            Border="false"
            Plain="true"
            Width="425"
            Modal="true"
            Layout="AbsoluteLayout"
            Padding="5">        
            <LayoutConfig>
                <ext:AbsoluteLayoutConfig  ReserveScrollbar="false"/>
            </LayoutConfig>
            <Items>
                <ext:FormPanel
                    ID="MyForm"
                    runat="server" 
                    Border="false"
                    Height="500"
                    Padding="30"
                    BodyStyle="background:transparent;" >
                    <Items>
                        <ext:TextField 
                            EnableKeyEvents="true"
                            ID="werwerewr" 
                            runat="server" 
                            AllowBlank="false"
                            HideLabel="true"    
                            BlankText="Test"
                            Text="">
                        </ext:TextField>
                        <ext:Button 
                            runat="server"
                            ID="TestButton"
                            TextAlign="Center"
                            Text="Test"
                            Border="true"
                            PaddingSpec="8 0 8 0"
                            Width="350"
                            FormBind="true">
                            <CustomConfig>
                                <ext:ConfigItem Name="onEnterKey" Value="Ext.emptyFn" Mode="Raw" />
                            </CustomConfig>
                            <Listeners>
                                <Click Handler="debugger;Ext.net.Mask.show({ msg : 'Test...' });" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:FormPanel>
            </Items>
        </ext:Window>
        <ext:KeyMap runat="server" ItemID="KeyMapOne" Target="Window1">
            <Binding>
                <ext:KeyBinding
                    DefaultEventAction="PreventDefault"
                    Handler="Ext.Msg.alert('keypress', 'you hit &quot;' + this.lastKeyEvent.getKeyName(this.lastKeyEvent.keyCode) + '&quot;');">
                    <Keys>
                        <ext:Key KeyName="Ext.event.Event.ENTER" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
        </ext:KeyMap>
    </form>
</body>
</html>

Notice also the KeyMap block is added after the window is drawn, so when it is parsed the window has already been rendered and the target Window1 will be available.

Hope this helps!

**fabricio.murta** · Jun 23, 2017, 7:16 PM

Hello @Z!

Do you still need assistance with this thread? You opened another similar one, but didn't provide any feedback here since last response.

We may mark this thread as closed if you don't provide us a feedback in 7+ days, but regardless of that, you'll still be able to post follow-ups when you are able to.

Z · Jun 26, 2017, 9:30 PM

Hello,

Sorry for delay, i needed to work on other v4 upgrade issues. i continue to have a problem. I tried your recommendations but nothing i did makes it work. I simplified my test case to the below. ENTER from the textfield should fire the button click event.

Thanks,
/Z


<%@ Page Language="C#" %>  
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html  lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Test</title>    
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout" Cls="page-color">
        <Items>


            <ext:Window 
                ID="TestWindow"
                runat="server" 
                Closable="false"
                Resizable="false"
                y="50"
                Cls="window-color"
                Height="500"
                Title=""
                Header="false"
                Border="false"
                Plain="true"
                Width="425"
                Modal="true"
                Layout="AbsoluteLayout"
                Padding="5">        
                <LayoutConfig>
                    <ext:AbsoluteLayoutConfig  ReserveScrollbar="false"/>
                </LayoutConfig>
                <Items>
                    <ext:FormPanel 
                        ID="TestForm"
                        runat="server" 
                        Border="false"
                        Height="500"
                        Padding="30"
                        BodyStyle="background:transparent;" >
                        <Items>
                            <ext:TextField 
                                ID="txtPassword" 
                                FieldLabel="Test"
                                runat="server" 
                                AllowBlank="false" 
                                Width="350"
                                Height="30"
                                PaddingSpec="10 0 30 0"
                                BlankText="Test"
                                Text="">
                            </ext:TextField>


                            <ext:Button 
                                runat="server"
                                ID="TestButton"
                                TextAlign="Center"
                                Html="<font size='4' color='RED'>Test</font>"
                                Border="true"
                                PaddingSpec="8 0 8 0"
                                Width="350"
                                FormBind="true">
                                <Listeners>
                                    <Click Handler="Ext.net.Mask.show({ msg : 'Test Passed ...' }); " />
                                </Listeners>
                            </ext:Button>
                        </Items>


                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </Items>
        <ext:KeyMap runat="server" Target="TestWindow">
            <Binding>
                <ext:KeyBinding
                    DefaultEventAction="PreventDefault"
                    Handler="Ext.Msg.alert('keypress', 'you hit &quot;' + this.lastKeyEvent.getKeyName(this.lastKeyEvent.keyCode) + '&quot;');">
                    <Keys>
                        <ext:Key KeyName="Ext.event.Event.ENTER" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
        </ext:KeyMap>
    </ext:Viewport>
</body>
</html>

**fabricio.murta** · Jun 27, 2017, 1:40 PM

Hello @Z!

I see your example does not trigger anything on enter at all? I mean, the keymap is not active at all. But as per your description, you don't really want a keymap, you just want to bind the enter key while in any field of the FormPanel to click the button (equivalent to a confirmation/sumbit button of the form)?

To make your 'test passed' mask be shown on the sample you provided, you have but to specify DefaultButton="TestButton" in your FormPanel properties/attributes.

I hope this helps! Let us know if you still need the keymap in your test case to capture the 'ENTER' keypress for a different event. Maybe, in a different situation? a field outside the FormPanel -- but inside the window?

**fabricio.murta** · Jul 14, 2017, 4:15 PM

Hello @Z!

It's been a while since we last responded this thread and still no follow-up from you. Do you still need help with this issue?

We may mark this thread as closed if you don't post back in 7+ days, but that won't prevent you from posting afterwards.

Z · Jul 18, 2017, 4:47 PM

You can close.
/Z

Thread: [CLOSED] KeyMap issue

Thread Tools

Search Thread

Display

[CLOSED] KeyMap issue

Similar Threads

[CLOSED] KeyMap

Keymap don't run with TreePanel

KeyMap by code behind

[CLOSED] How to use new keymap in

[CLOSED] Compatibility issue [DEPRECATED][4.0][KeyMap]: Ext.KeyMap has been deprecated, use Ext.util.KeyMap.

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] KeyMap issue

[CLOSED] KeyMap issue

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us