[FIXED] [#464] [2.5.3] Refreshing Menu items doesn't work

[chsakell]

I have a Menu control in the .aspx markup as follow:

<Menu ID="mnuUserData" runat="server">
                            <Items>
                            </Items>
                            <Listeners>
                                <Click Fn="editUserData" />
                            </Listeners>
                        </Menu>

It's menu items are added during the page load event. So far so good. When a click event occurs on some other menu items in the page, the "updateMnuUserData" function is invoked. What I want is to remove all existed items and load new ones with a direct method. So the updateMnuUserData is something like this.

var mnuUserData = Ext.getCmp('mnuUserData ');
 mnuUserData .items.each(function (item) {
      mnuUserData .remove(item);
    });
 App.direct.LoadUserData('someTextHere');

And the LoadUserData direct method is something like this.

Ext.Net.Menu userMenu = X.GetCmp<Ext.Net.Menu>("mnuUserData");
foreach (Link link in category.Links)
                    {
                        Ext.Net.MenuItem newMnuItem = new Ext.Net.MenuItem
                        {
                            Text = link.Url,
                            Icon = Icon.PageWorld
                        };
                        userMenu.Items.Add(newMnuItem);
                        newMnuItem.Render();
                    }

This code seems to work fine, but not always. First of all It ALWAYS removes existed items and add the respective ones. The scenario where it NEVER works is when I add only one Item. When I do this, clicking on that item does not activate the button. I get an error "Cannot call method 'deactivate' of undefined", on the client size.

if(item){this.clearSelection();this.selectedIndex=this.menu.items.indexOf(item);this.getSelIndexField().setValue(this.selectedIndex);item.activate();}}},clearSelection:function(){if(this.selectedIndex>-1){this.menu.getComponent(this.selectedIndex).deactivate();}

It seems that this line: {this.menu.getComponent(this.selectedIndex).deacti vate();} causes the problem cause the "selectedIndex=1" and when only one item exist the this.menu.getComponent(this.selectedIndex) returns undefined. Can you tell me how to solve that using the direct method? Ok, all existed items are being removed and new are added but I could't figure out how to solve this one.

Kind regards

[chsakell]

I have a Menu control in the .aspx markup as follow:

<Menu ID="mnuUserData" runat="server">
                            <Items>
                            </Items>
                            <Listeners>
                                <Click Fn="editUserData" />
                            </Listeners>
                        </Menu>

It's menu items are added during the page load event. So far so good. When a click event occurs on some other menu items in the page, the "updateMnuUserData" function is invoked. What I want is to remove all existed items and load new ones with a direct method. So the updateMnuUserData is something like this.

var mnuUserData = Ext.getCmp('mnuUserData ');
 mnuUserData .items.each(function (item) {
      mnuUserData .remove(item);
    });
 App.direct.LoadUserData('someTextHere');

And the LoadUserData direct method is something like this.

Ext.Net.Menu userMenu = X.GetCmp<Ext.Net.Menu>("mnuUserData");
foreach (Link link in category.Links)
                    {
                        Ext.Net.MenuItem newMnuItem = new Ext.Net.MenuItem
                        {
                            Text = link.Url,
                            Icon = Icon.PageWorld
                        };
                        userMenu.Items.Add(newMnuItem);
                        newMnuItem.Render();
                    }

This code seems to work fine, but not always. First of all It ALWAYS removes existed items and add the respective ones. The scenario where it NEVER works is when I add only one Item. When I do this, clicking on that item does not activate the button. I get an error "Cannot call method 'deactivate' of undefined", on the client size.

if(item){this.clearSelection();this.selectedIndex=this.menu.items.indexOf(item);this.getSelIndexField().setValue(this.selectedIndex);item.activate();}}},clearSelection:function(){if(this.selectedIndex>-1){this.menu.getComponent(this.selectedIndex).deactivate();}

It seems that this line: {this.menu.getComponent(this.selectedIndex).deacti vate();} causes the problem cause the "selectedIndex=1" and when only one item exist the this.menu.getComponent(this.selectedIndex) returns undefined. Can you tell me how to solve that using the direct method? Ok, all existed items are being removed and new are added but I could't figure out how to solve this one.

Kind regards

When I first load the page, I add 8 items into the menu. After removing all items and load new ones (for example 3 items), the menu displayes only the 3 new items but from the console I get that it still have 8 items! (menu.items.length). The error happens in case I load more than 1 items, click on the last of them, and finally remove them and load only one item into the menu. Clicking on that item causes the button not to be activated cause it's clearSelection function fails. Any ideas?

[Daniil]

Hi @chsakell,

Could you provide us with a simplified test case to reproduce the problem?

[chsakell]

Hi @chsakell,

Could you provide us with a simplified test case to reproduce the problem?

Hi Daniil, thank you for your interest. Actually I created a mock page for you to run and check the problem. Simply run the following page.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            FillUserCategoryPanel();
        }
    }

    [DirectMethod]
    public void LoadUserCategoryProducts(string userCategory)
    {
        Ext.Net.Menu userAllProducts = X.GetCmp<Ext.Net.Menu>("mnuUserProducts");

        if (userCategory == "Category - 0" || userCategory == "Category - 1" || userCategory == "Category - 2")
        {
            for (int i = 0; i < 4; i++)
            {
                Ext.Net.MenuItem mnuItemLink = new Ext.Net.MenuItem
                {
                    Text = "Product - " + i,
                    Icon = Icon.PageWorld
                };
                userAllProducts.Items.Add(mnuItemLink);
                mnuItemLink.Render();
            }
        }
        else
        {
            for (int i = 0; i < 1; i++)
            {
                Ext.Net.MenuItem mnuItemLink = new Ext.Net.MenuItem
                {
                    Text = "Product - " + i,
                    Icon = Icon.PageWorld
                };
                userAllProducts.Items.Add(mnuItemLink);
                mnuItemLink.Render();
            }
        }
    }


    private static void FillUserCategoryPanel()
    {
        Ext.Net.Menu userCategories = X.GetCmp<Ext.Net.Menu>("mnuUserCategories");
        Ext.Net.Menu userAllProducts = X.GetCmp<Ext.Net.Menu>("mnuUserProducts");
        for (int i = 0; i < 5; i++ )
        {
            Ext.Net.MenuItem mnuItem = new Ext.Net.MenuItem
            {
                Text = "Category - " + i,
                Icon = Icon.FolderTable
            };
            userCategories.Items.Add(mnuItem);
        }
        for (int j = 0; j < 10; j++ )
        {
            Ext.Net.MenuItem mnuItemLink = new Ext.Net.MenuItem
            {
                Text = "Product - " + j,
                Icon = Icon.PageWorld
            };
            userAllProducts.Items.Add(mnuItemLink);
            mnuItemLink.Render();
        }
    }
</script>
<script type="text/javascript">

    var editUserCategory = function (menu, item) {
        var mnPnlCategory = Ext.getCmp('MenuPanelCategory');
        mnPnlCategory.setTitle(item.text);
        var mnuUserProducts = Ext.getCmp('mnuUserProducts');
        mnuUserProducts.items.each(function (item) {
            mnuUserProducts.remove(item);
        });
        mnuUserProducts.removeAll(true);

        App.direct.LoadUserCategoryProducts(item.text);

    };

</script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" Theme="Gray" />
    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            
            <ext:Panel
                ID="PanelUserCategories"
                runat="server"
                Region="West"
                Collapsible="true"
                Split="true"
                MinWidth="217"
                Width="252"
                Collapsed="false"
                MaxWidth="400"
                Layout="Fit">
                <Items>
                    <ext:MenuPanel
                        runat="server"
                        Title="Categories"
                        Icon="Folder">
                        <Menu ID="mnuUserCategories" runat="server">
                            <Items>
                            </Items>
                            <Listeners>
                                <Click Fn="editUserCategory" />
                            </Listeners>
                        </Menu>
                    </ext:MenuPanel>
                </Items>
            </ext:Panel>

            <ext:TabPanel runat="server" Region="Center" ID="UserEditPanel">
                <Items>
                    <ext:Panel
                        Closable="false"
                        runat="server"
                        Reorderable="false"
                        BodyPadding="6"
                        Icon="ApplicationHome"
                        AutoScroll="true">
                        <Items>
                            
                            <ext:Panel
                                runat="server"
                                Region="West"
                                Collapsible="false"
                                Split="false"
                                Collapsed="false"
                                Layout="FitLayout">
                                <Items>
                                    <ext:MenuPanel
                                        ID="MenuPanelCategory"
                                        runat="server"
                                        Title="All Products"
                                        Icon="BoxWorld">
                                        <Menu ID="mnuUserProducts" runat="server">
                                            <Items>
                                            </Items>
                                        </Menu>
                                    </ext:MenuPanel>
                                </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
                <Plugins>
                    <ext:BoxReorderer runat="server" />
                    <ext:TabCloseMenu runat="server" />
                </Plugins>
            </ext:TabPanel>
            
        </Items>
    </ext:Viewport>
</body>
</html>

Load the page and you will get the following result.

On purpose Categories 0-1-2 have more than 1 items.

Test case:
Step 1. When page loads, press Category - 3 or Category - 4 from left, and confirm that you can press succesfully (activate button) Product - 0 on the right side.
Step 2. Then select from the left Category - 0 or Category - 1 or Category - 2 and Press Product - 3 from the right panel.
Step 3. Select again Category - 3 or Category - 4 and see that you CANNOT activate the button with text Product - 0

Kind regards,

chsakell

[Daniil]

Thank you for the test case. It is a bug.

Created an Issue:
https://github.com/extnet/Ext.NET/issues/464

It has been fixed in the trunk in the revision #5784. The fix will go to the v2.6 release.