What's New?

[CLOSED] Updating the Overflow Menu

  1. #1
    Apr 24, 2012, 10:39 AM

    [CLOSED] Updating the Overflow Menu

    Hi,

    I need to change the contents of the toolbar overflow menu dynamically, so outside of the initial page load. In my .js code I am hiding and showing different toolbar buttons depending on user input, my problem is the overflow menu always reflects the initial on page load state of the toolbar and therefore does not reflect I may have hidden some of the buttons. Is there a way to regenerate the overflow menu?

    Any help appreciated,

    - Michelle
    Last edited by Daniil; May 02, 2012 at 10:05 PM. Reason: [CLOSED]
  2. #2
    Apr 24, 2012, 11:40 AM
    Hi,

    Welcome to Ext.NET!

    You can set up the "xtbHidden" property to false and call the doLayout method for the ToolBar.

    Example
    <%@ 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 Example</title>

    <script type="text/javascript">
        var hideItem = function (toobar, item) {
            if (item.hidden) {
                item.xtbHidden = false;
            } else {
                item.hide();
            }

            toobar.doLayout();
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Toolbar ID="Toolbar1" runat="server" Width="200" EnableOverflow="true">
            <Items>
                <ext:Button runat="server" Text="Button 1" />
                <ext:Button ID="Button2" runat="server" Text="Button 2" />
                <ext:Button runat="server" Text="Button 3" />
                <ext:Button runat="server" Text="Button 4" />
                <ext:Button ID="Button5" runat="server" Text="Button 5" />
                <ext:Button runat="server" Text="Button 6" />
            </Items>
        </ext:Toolbar>

        <ext:Button runat="server" Text="Hide the 2nd button">
            <Listeners>
                <Click Handler="hideItem(Toolbar1, Button2)" />
            </Listeners>
        </ext:Button>

        <ext:Button runat="server" Text="Hide the 5th button">
            <Listeners>
                <Click Handler="hideItem(Toolbar1, Button5)" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  3. #3
    Apr 25, 2012, 9:39 AM

    Re: Updating the toolbar overflow menu

    Hi Dannii,

    Thanks for your reply, unfortunatley I'm still having an issue with the overflow icons, the relevant code is shown below:

     initialise: function () {
            $shell.showProgress("Loading Plan...");
            btnAutoBalance.hide();
            btnAutobalance.xtbHidden = false;
            planToolbar.doLayout();
        },
    I have also attached a couple of screenshots of the issue and some files which I think are relevant. The toolbar I am using overrides the createMenuConfig of the ToolbarLayout, using the xtbHidden = false appears to still display all the icons in the overflow (including those hidden) but the image swap in the override appears to be ignored. (This code is in the attached file ToolbarJavascript)

    Thanks again for your help.

    Michelle

    - Michelle
    Attached Thumbnails Click image for larger version.  Name: Toolbar-icons.jpg  Views: 81  Size: 89.1 KB  ID: 4165   Click image for larger version.  Name: toolbar-overflow-icons.jpg  Views: 72  Size: 82.8 KB  ID: 4166  
    Attached Files
  4. #4
    Apr 25, 2012, 10:37 AM
    Could you provide a full sample posting directly here wrapping in [CODE ] tags?

    Please simplify the sample as much as you can. I think only ToolBar with its Items are required and the scripts which override ToolBar.
  5. #5
    Apr 25, 2012, 2:03 PM
    Quote Originally Posted by Daniil View Post
    Could you provide a full sample posting directly here wrapping in [CODE ] tags?

    Please simplify the sample as much as you can. I think only ToolBar with its Items are required and the scripts which override ToolBar.
    var planToolbar = $.extend(
{
    planId: -1,
    initialise: function (planId) {
        planToolbar.planId = planId;

        Ext.layout.ToolbarLayout.override({
            createMenuConfig: function (component, hideOnClick) {
                var config = Ext.apply({}, component.initialConfig),
                        group = component.toggleGroup;

                Ext.copyTo(config, component, [
                        'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
                    ]);

                Ext.apply(config, {
                    text: component.overflowText || component.text,
                    hideOnClick: hideOnClick
                });

                if (group || component.enableToggle) {
                    Ext.apply(config, {
                        group: group,
                        checked: component.pressed,
                        listeners: {
                            checkchange: function (item, checked) {
                                component.toggle(checked);
                            }
                        }
                    });
                }

              
                config.iconCls = config.iconCls.replace(/-24/g, "-16");
                delete config.ownerCt;
                delete config.xtype;
                delete config.id;

                return config;
            }
        });

    },
      public class PlanToolbar : Toolbar
    {
 #region AutoBalance Button

            var buttonAutoBalance = new Button
            {
                ID = "btnAutoBalance",
                Text = Strings.AutoBalance,
                IconCls = "tool-mode-balancer-32",
                ToolTip = "Auto Balance",
                ToolTipType = ToolTipType.Title,
                Scale = ButtonScale.Large,
                IconAlign = IconAlign.Top,
                Hidden = PlanningMode != ToolbarMode.Balancer,

            };

            buttonAutoBalance.Listeners.Click.Handler = "planBalancer.autoBalancerWizard.show()";
            if (!buttonAutoBalance.Hidden)
                buttonAutoBalance.Hidden = !SecurityCheck.HoldsPrivilege(Privilege.AutoBalancingPlan);

            #endregion
}
    Thanks
  6. #6
    Apr 25, 2012, 2:40 PM
    Well, it's hard to say what you should change to achieve your requirement.

    We need a sample which we could run locally and reproduce the problem. For testing purpose.

Similar Threads

  1. [RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0
    By vs.mukesh in forum 2.x Help
    Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  2. How can I overflow ie outside the Viewport ?
    By ismailkocacan in forum 1.x Help
    Replies: 3
    Last Post: Aug 21, 2011, 3:38 PM
  3. [CLOSED] Toolbar overflow icons
    By paulc in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 28, 2011, 2:09 PM
  4. [CLOSED] Panel Overflow
    By tiramisu in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 18, 2010, 10:45 AM
  5. [CLOSED] [1.0] Toolbar Overflow
    By Ben in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 12, 2010, 3:02 PM

Posting Permissions