What's New?

[CLOSED] Setting active MenuItem on the client

  1. #1
    Aug 11, 2015, 7:06 PM

    [CLOSED] Setting active MenuItem on the client

    Hi,

    I'm trying to port the following code snippet that used to work in 1.7:

    // menuPanel is an instance of MenuPanel control housed within a Panel set up with Accordion Layout
// menuItem is an instance of MenuItem control
var menuPanelsCt = menuPanel.ownerCt;
menuPanelsCt.layout.setActiveItem(menuPanel);
menuPanelsCt.items.each(function (item) {
     if (item.menu.rendered) {
         item.clearSelection();
     }
});
menuPanel.setSelection(menuItem);
    The code doesn't work because the prototype of Accordion layout control class doesn't define the setActiveItem method any longer:

    ExtJs 5.0
    ExtJs 3.4

    Is there any way around this issue?
    Last edited by Daniil; Aug 18, 2015 at 2:16 PM. Reason: [CLOSED]
  2. #2
    Aug 12, 2015, 2:23 AM
    This code pulls the menupanel and menuitem from the attributes of "item" (my variable). Then i expand the panel and fire the click event (should set the selection) and do as if you clicked.

    You can probably fire the select event (if it exists).

    I need parent to access the object. you might need App or top depending...

    Hope this helps!
    /Z


                    var panel = item.getAttribute('ext:panel');
                var menu = item.getAttribute('ext:menu');


                if (!Ext.isEmpty(panel, false)) {
                    parent.Ext.getCmp('ctl00_WestMenu1_' + panel).expand(false);
                }


                if (!Ext.isEmpty(menu, false)) {
                    var f = function () {
                        parent.Ext.getCmp('ctl00_WestMenu1_' + menu).parentMenu.fireEvent("click", parent.Ext.getCmp('ctl00_WestMenu1_' + menu));
                    };
                    Ext.Function.defer(f, 250);
                }
  3. #3
    Aug 12, 2015, 3:42 PM
    Thanks @Z for your suggestions! Would you mind sharing a more fulsome code snippet if you have it available?
  4. #4
    Aug 12, 2015, 6:45 PM
    Hello everybody!

    Agree with @Z. It looks like expanding an item is a substitution of a .setActiveItem() call.

    So, theoretically I would try to replace
    menuPanelsCt.layout.setActiveItem(menuPanel);
    with
    menuPanel.expand();
  5. #5
    Aug 17, 2015, 2:09 PM
    Is it possible in 3.2 to clear selected menu items?

    menuPanel.items.each(function (item) {
   if (item.menu.rendered) {
      item.clearSelection();
   }
});
    Edit in:
    Also, I think this question is related to the current thread. What's the config setting, if any, to make a MenuPanel preserve the selection of a Menu Item? When I click on a Menu Item and then hover mouse over other elements, the active selection disappears. I remember having the desired behavior in v1.7 by default.

    <%@ 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 xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net 3.x</title>
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Toolbar runat="server" Region="North" Height="60">
                    <Items>
                        <ext:ToolbarTextItem runat="server" Text="Accordion Layout Example"></ext:ToolbarTextItem>
                    </Items>
                </ext:Toolbar>
                <ext:Panel ID="Panel1" runat="server" Region="West" Width="240" Header="true" Title="Main Menu"
                    Layout="AccordionLayout" Collapsible="true" CollapseMode="Mini" Split="false" MaxWidth="240">
                    <Items>
                        <ext:MenuPanel ID="MenuPanel1" ItemID="MenuPanel1" runat="server" AutoScroll="true"
                            Title="Menu Panel 1" Border="false">
                            <Menu ID="Menu1" runat="server">
                                <Items>
                                    <ext:MenuItem ID="MenuItem1" ItemID="MenuItem1" runat="server"
                                        Text="Menu Item 1">
                                    </ext:MenuItem>
                                    <ext:MenuItem ID="MenuItem2" ItemID="MenuItem2" runat="server"
                                        Text="Menu Item 2">
                                        <Menu>
                                            <ext:Menu ID="SubMenu1" runat="server">
                                                <Items>
                                                    <ext:MenuItem ID="MenuItem3" ItemID="MenuItem3" runat="server"
                                                        Text="Menu Item 3">
                                                    </ext:MenuItem>
                                                </Items>
                                            </ext:Menu>
                                        </Menu>
                                    </ext:MenuItem>
                                    <ext:MenuItem ID="MenuItem4" ItemID="MenuItem4" runat="server"
                                        Text="Menu Item 4">
                                    </ext:MenuItem>
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
                    </Items>
                </ext:Panel>
                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Display" EnableTabScroll="true">
                </ext:TabPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Last edited by vadym.f; Aug 17, 2015 at 6:11 PM. Reason: Related question
  6. #6
    Aug 18, 2015, 10:37 AM
    Is it possible in 3.2 to clear selected menu items?
    Please provide a test case to deal with. I would investigate.

    Also, I think this question is related to the current thread. What's the config setting, if any, to make a MenuPanel preserve the selection of a Menu Item?
    Agree, it is related, but still quite an individual one. I would appreciate starting a new forum thread for that.

    UPDATE:

    No need to start a new thread. It has been already fixed in the context of this GitHub issue.
    Last edited by Daniil; Aug 18, 2015 at 11:27 AM.
  7. #7
    Aug 18, 2015, 1:59 PM
    Thanks, Daniil! The fix is working well in IE11 and Google Chrome 44 so right now there appears to be no need for me to clear selected menu items. You may close this thread.

Similar Threads

  1. Add menu item using client side code
    By paul-2011 in forum 2.x Help
    Replies: 2
    Last Post: Sep 18, 2013, 12:04 PM
  2. [CLOSED] How to check a menu item on the client?
    By vadym.f in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 02, 2013, 3:46 PM
  3. [CLOSED] Error setting active tab
    By sbg in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 18, 2012, 2:51 PM
  4. [CLOSED] How to make an active tab select its corresponding menu item?
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 02, 2012, 5:56 PM
  5. [CLOSED] Setting a default active panel for the accordion other than the first one?
    By Onur in forum 1.x Help
    Replies: 1
    Last Post: Oct 28, 2008, 6:34 AM

Tags for this Thread

Posting Permissions