[FIXED] [#1466] [4.3.0] Keymap in gridpanel not working

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [FIXED] [#1466] [4.3.0] Keymap in gridpanel not working

    Are there any gotchas that would cause a keymap declaration inside a gridpanel to not work, i.e. The key press doesn't trigger the JavaScript function.

    I am talking about something like this:
    public class UserAdminAppWindow: Window
        {
            
            public UserAdminAppWindow() : base()
            {
                Title = "AdminTool";
                Icon = ext.Icon.User;
                Layout = "BorderLayout";
                ItemID = "userAdminAppWindow";
    
                var userGridPanel = new UserGridPanel() { Split = true };
    
    
    
                Items.Add(new ItemCollection()
                        {
                         new UserSearchWindow()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userSearchWindow"
                            },
                            new UserEditFormWindow()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userEditFormWindow"
                            },
                            userGridPanel,
                            new UserPermissionsDetailPanel(),                       
                        });
    
                KeyMap = new KeyMap()
                {
                    ItemID = "userAdminAppWindowKeyMap",
    
                    Target = "={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}",
                    Binding =
                    {
    
                        new KeyBinding()
                        {
                        DefaultEventAction = EventAction.StopEvent,
                        Handler = "debugger;this.down('#userSearchButton').fireEvent('click')",
                        Keys =
                                {
                                    new Key() { Code = KeyCode.J }
                                }
                        }
                    }
                };
            }
        }
    When you declare a keymap as a property of a component does it explicitly take care of setting the target?

    Thanks
    Last edited by fabricio.murta; Aug 10, 2017 at 2:17 AM.
  2. #2
    Hello @tolgaerdogus!

    I see you instantiate your keymap in code behind. You set a target and all...

    But I don't see you bind the object to anywhere in the page... so it is just not emitted client-side at all.

    You should be adding it either to the page body, to a present component's list of items, something like that. I don't see you adding the grid panel to the page at all... If I assume you are actually adding the code you are instantiating to the client side, I can't see anything wrong, so I guess we'd better off if you provided a runnable test case so we could reproduce your issue and be able to give you advices about it.

    Not sure how to come up with a runnable example? Grab any example in our Examples Explorer as a starting point, they usually are 1-file examples (unless required), so it should do great!..

    More on simplifying runnable test cases we can provide you help with is here:
    Tips for creating simplified code samples

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I have a self contained example project demonstrating the issue but it's 105MB with dlls. Where would you like me to upload it to?

    Thanks
  4. #4
    Hello, @tolgaerdogus!

    Please review the forum thread linked in our last response, we don't accept whole projects as test cases as so far none of them have proved useful to reproduce and solve issues. The test case should be simplified and posted here in [code][/code] blocks.

    This may sound annoying and challenging, but as soon as you make the first simplified example, the rest will be easy. And we will be effectively able to understand your issue and help you solve it.

    Besides, many times when you are simplifying the test case itself you can end up finding the reason or whether it is or is not related to Ext.NET (if it is not related to Ext.NET, we can't help much with the issue).
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Create clean Asp.Net project, install Ext.Net MVC nuget package and add/edit following files.
    In running app click the desktop module shortcut and in resulting blank window that pops up, hit the "J" key and expect that the debugger is triggered, however it's not...


    User.cs:

    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    namespace AdminToolWeb.ExtNet
    {
    
        public class UserAdminAppWindow: Window
        {
            
            public UserAdminAppWindow() : base()
            {
                Title = "AdminTool";
                Icon = ext.Icon.User;
                Layout = "BorderLayout";
                ItemID = "userAdminAppWindow";
    
                var userGridPanel = new GridPanel() { Split = true };
                
                Items.Add(new ItemCollection()
                        {
                         new Window()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userSearchWindow"
                            },
                            new Window()
                            {
                                Hidden = true,
                                Modal = true,
                                ItemID = "userEditFormWindow"
                            },
                            userGridPanel,
                            //new UserPermissionsDetailPanel(),                       
                        });
    
                KeyMap = new KeyMap()
                {
                    ItemID = "userAdminAppWindowKeyMap",
    
                    Target = "={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}",
                    Binding =
                    {
    
                        new KeyBinding()
                        {
                        DefaultEventAction = EventAction.StopEvent,
                        Handler = "debugger;",
                        Keys =
                                {
                                    new Key() { Code = KeyCode.J }
                                }
                        }
                    }
                };
            }
        }
    
    
        
    }
    MainApp.cs:
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    namespace AdminToolWeb.ExtNet
    {
        public class Desktop
        {
            public static string RenderDesktop()
            {
                //var vp = new UserAdminApp();
                var vp = new TPCDesktop();
                return vp.ToScript();
            }
           
        }
    }
    Desktop.cs:
    using Ext.Net;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using ext = Ext.Net;
    
    
    namespace AdminToolWeb.ExtNet
    {
    
    
        public class TPCDesktop: ext.Desktop
        {
          
            protected UserAdminAppWindow adminToolWindow = new UserAdminAppWindow()
            {
                //Plain = true,
                //Padding = 10,
                Width = 1000,
                Height = 800,
                Title = "AdminTool",
                CloseAction = CloseAction.Destroy,
                Maximizable = true,
                Minimizable = true,
    
            };
            protected DesktopModule adminToolDesktopModule = new DesktopModule()
            {
                ModuleID = "AdminTool",
                AutoRun = false,
    
                Shortcut = new DesktopShortcut()
                {
                    Name = "Admin Tool",
                    SortIndex = 100,
                    IconCls = "x-im-shortcut",
    
                },
    
                Launcher = new MenuItem()
                {
                    Text = "Admin Tool",
                    Icon = Icon.User
                }
            };
    
            public TPCDesktop() : base()
            {
                ID = "Desktop1";
                Listeners.Ready.BroadcastOnBus = "App.Desktop.ready";
                adminToolDesktopModule.Window.Add(adminToolWindow);
                
    
    
                Modules.Add(adminToolDesktopModule);
    
                //Modules.Add(wikiDesktopModule);
    
                DesktopConfig = new DesktopConfig()
                {
                    Wallpaper = "",
                    ShortcutDragSelector = true,
    
                };
    
                StartMenu = new DesktopStartMenu()
                {
                    Title = "TimePayment Desktop",
                    Icon = Icon.Application,
                    Height = 300,
    
                };
                var toolbar = new Toolbar()
                {
                    Width = 100,
    
                };
                toolbar.Items.Add(new Button()
                {
                    Text = "Settings",
                    Icon = Icon.Cog
                });
                var logoutButton = new Button()
                {
                    Text = "Logout",
                    Icon = Icon.Key,
    
                };
                logoutButton.DirectEvents.Click.Action = "/Account/LogOff";
                logoutButton.DirectEvents.Click.EventMask.ShowMask = true;
                logoutButton.DirectEvents.Click.EventMask.Msg = "Good Bye...";
                logoutButton.DirectEvents.Click.EventMask.MinDelay = 300;
    
                toolbar.Items.Add(logoutButton);
                StartMenu.ToolConfig.Add(toolbar);
    
    
            }
        }
    }
    ExtNet/Index.cshtml:
    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @model WebApplication1.Models.ExtNetModel
    
    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Sample</title>
    
        <link type="text/css" rel="stylesheet" href="http://speed.ext.net/www/intro/css/main.css" />
    </head>
    <body>
        @(Html.X().ResourceManager())
    
        <header></header>
        <script>
            @Html.Raw(AdminToolWeb.ExtNet.Desktop.RenderDesktop());
        </script>
    
    </body>
    </html>
  6. #6
    Hello!

    Thanks for your efforts simplifying the test case! I could run it here and reproduce the issue!

    But I believe you didn't really need all that to reproduce this issue as -- for what I found as the issue -- this is enough to reproduce it:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>61852 - Keymap not working</title>
    </head>
    <body>
        <div>
            @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
            @(
                Html.X().Window()
                    .Title("My Window")
                    .KeyMap(
                        Html.X().KeyMap()
                            .ItemID("userAdminAppWindowKeyMap")
                            .Target("={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}")
                            .Binding(b => b.Add(
                                new KeyBinding()
                                {
                                    DefaultEventAction = EventAction.StopEvent,
                                    Handler = "debugger;",
                                    Keys =
                                    {
                                        new Key() { Code = KeyCode.J }
                                    }
                                }
                            ))
                    )
            )
        </div>
    </body>
    </html>
    As per current KeyMap documentation this KeyMap structure/object is completely wrong.

    In fact, the key mapping structure should just be a simple object with the key and a key's handler, although the documentation is very brief and does not make it clear how to, for example, bind key modifiers to a key press, as we can't just use any word as an object's key and some characters may even break the code.

    Anyway, I got it working on pure ExtJS and, even using the correct syntax, there seems to be something in Ext.NET preventing the keys from actually binding to the component. So, I logged this as an issue after #1466. We will need some time in order to figure out why exactly key binding is not working on Ext.NET at all.
    Last edited by fabricio.murta; Jul 04, 2017 at 12:51 AM.

Similar Threads

  1. Replies: 6
    Last Post: Sep 04, 2012, 12:59 PM
  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. KeyMap not working for whole window
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 21, 2009, 1:55 PM

Posting Permissions