[FIXED] [#1559] [4.5.0] Desktop - disable/enable context menu items

  1. #1

    [FIXED] [#1559] [4.5.0] Desktop - disable/enable context menu items

    Hello support team,
    I added a new item to the desktop context menu and I want to disable / enable it under certain condition. Unfortunately, I am not successful. What am I doing wrong?

    @using Ext.Net;
    @using Ext.Net.MVC;
    
    @{
        ViewBag.Title = "Desktop Drag & Drop Example - Disable Context Menu Items";
        Layout = null;
        var X = Html.X();
    
        List<MenuItem> startMenu = new List<Ext.Net.MenuItem>();
    
        foreach (var menuEntry in new[]
        {
            new { id = "EU", text = "European Union", icon = Icon.FlagEuropeanunion },
            new { id = "US", text = "United States", icon = Icon.FlagUs }
        }) {
            startMenu.Add(new MenuItem()
            {
                ID = menuEntry.id,
                Icon = menuEntry.icon,
                Text = menuEntry.text
            });
    
        }
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <title>Ext.NET MVC Test Case</title>
    
        <style>
            .x-default-shortcut {
                background: url("http://www.nlm.cz/img/logoNewlink.png");
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
    
        <script type="text/javascript">
    
            function desktopReady() {
                createModule("EU");
                createModule("US");
    
                var itemArrangeShortcuts = Ext.create('Ext.menu.Item', {
                    id: "_nelisDestop_NewContextMenuItem",
                    text: "Default shortcuts position",
                    disabled: true,
                    listeners: {
                        click: function () { App._nelisDesktop.desktop.arrangeShortcuts(true); }
                    }
                });
    
                App._nelisDesktop.desktop.contextMenu.add(Ext.create("Ext.menu.Separator"));
                App._nelisDesktop.desktop.contextMenu.add(itemArrangeShortcuts);
                App._nelisDesktop.desktop.contextMenu.addListener("beforeshow", function () {
                    Ext.getCmp("_nelisDestop_NewContextMenuItem").setDisabled(App._nelisDesktop.desktop.shortcuts.getCount() === 0);
                });
            }
    
            var createModule = function (moduleId) {
                var item = Ext.getCmp(moduleId);
                var newModuleId = "dynModule_" + moduleId;
    
                App._nelisDesktop.addModule(Ext.create("Ext.ux.desktop.Module", {
                    id: newModuleId,
                    shortcut: { name: item.text, module: newModuleId, IconCls: "x-default-shortcut" },
                    autoRun: true
                }));
            }
    
            var removeModule = function (title) {
                var moduleId = "dynModule_" + (title == "EuropeanUnion" ? "EU" : "US");
                Ext.net.Desktop.removeModule(moduleId);
            }
    
        </script>
    </head>
    
    <body>
        @X.ResourceManager()
    
        @(X.Desktop()
            .ID("_nelisDesktop")
            .Listeners(l => l.Ready.Fn = "desktopReady")
            .DesktopConfig(
                X.DesktopConfig()
                .ID("_nelisDesktop_Area")
                .ShortcutDefaults(defaults => defaults.IconCls = "x-default-shortcut")
                .SortShortcuts(true)
                .ShortcutDragSelector(true)
            )
            .StartMenu(
                X.DesktopStartMenu()
                    .ID("_nelisDesktop_StartMenu")
                    .Title("Allegro Desktop")
                    .Icon(Icon.Application)
                    .MenuItems(startMenu)
                    .Width(400)
                    .Height(150)
                    .ToolConfig(
                        X.Toolbar()
                            .Width(200)
                            .Items(
                                X.Button()
                                .Icon(Icon.FlagEuropeanunion)
                                .Text("Remove EU Shortcut")
                                .OnClientClick("removeModule(\"EuropeanUnion\")"),
                                X.Button()
                                .Icon(Icon.FlagUs)
                                .Text("Remove US Shortcut")
                                .OnClientClick("removeModule(\"UnitedStates\")")
                            )
                    )
    
            )
            .Modules(
                X.DesktopModule().ModuleID("_nelisDesktop_EmptyModule") // Ext.ux.desktop.App.getModule() does not expect that no modules exist => create at least a fake one
            )
        )
    </body>
    </html>
    Steps to reproduce this behaviour:
    1. Right-click to open a context menu -> menu item is enabled
    2. Delete shortcuts (from start menu)
    3. Right-click to open a context menu again -> menu item is still enabled

    Thank you for your help.

    Dan
    Last edited by fabricio.murta; Oct 06, 2017 at 12:26 AM.
  2. #2
    Hello Dan!

    You are doing it right! ExtJS is at fault here! We've logged the issue under #1559 and will update it here as soon as we commit the fix to our code.

    As far as a workaround is concerned, just manipulate the menu entry's minWindows property. A very high number will ensure it will be disabled and zero will ensure it will always be enabled. Change this portion on your desktopReady() client-side method:

    App._nelisDesktop.desktop.contextMenu.addListener("beforeshow", function () {
        var menuEntry = Ext.getCmp("_nelisDestop_NewContextMenuItem"),
            shouldDisable = App._nelisDesktop.desktop.shortcuts.getCount() === 0;
    
        menuEntry.minWindows = shouldDisable ? 999 : 0;
    });
    Hope this helps!

    p.s.: this is just a quick workaround! a proper fix is ready to be applied to the code, that will be available as soon as Ext.NET 4.5.0 is released!
  3. #3
    Hello FabrÃ*cio,
    thank you for the workaround. Meanwhile, I overrode the Ext.ux.desktop.Desktop.onDesktopMenuBeforeShow listener, which in my opinion improperly assumes that no new menu items will be added, or that all items will be related to the number of windows. Your suggestion is, however, more generic and I will use it instead of my solution which is too hardcoded to my taste.

    Thank you for your valuable assistance I can learn a lot from.

    Dan
  4. #4
    Hello, Dan! Committed into the Ext.NET code, that will be going to become Ext.NET 4.5.0. Currently on github, branch ExtJS_652 if you looking to test the fix right away.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hello FabrÃ*cio,
    branch ExtJS_652 was briefly tested for this fix and setDisabled() works as expected. We had encountered other (to our project related) issues so reverted this branch back, but as far as this problem is concerned, it is all right.

    Thank you for your help.

    Dan
  6. #6
    Hello @NewLink!

    Thank you for the feedback and glad it works! The branch already contains ExtJS 6.5.2 and we're still reviewing API changes to Ext.NET server-side, so it is considered unstable, although we ran Examples Explorers over it and all seemed good.
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Hello FabrÃ*cio, tested and works as expected. Thank you for your assistance.

    Dan
  8. #8
    Awesome, Dan! Thanks for the feedback, glad the fix really worked!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [OPEN] [#1556] [4.4.1] Desktop - context menu on Start
    By NewLink in forum 4.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 02, 2017, 6:43 PM
  2. Replies: 2
    Last Post: Jun 07, 2016, 1:22 AM
  3. [CLOSED] Disable/Enable Vertical Marker based on Context Menu
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 21, 2013, 1:44 PM
  4. Replies: 1
    Last Post: Jan 12, 2013, 4:30 AM
  5. Replies: 6
    Last Post: Aug 17, 2012, 2:02 PM

Posting Permissions