What's New?

[OPEN] [#159] Can't share menu across different toolbar buttons

  1. #1
    Feb 22, 2013, 1:50 AM

    [OPEN] [#159] Can't share menu across different toolbar buttons

    We have a page with many panels and toolbar buttons with menus. To optimize performance in 1.x, you recommend to create one menu and share it across all buttons. In 2.x, I can't get a reference to the panel the menu currently is in. Click on the Menu Item in panel one, it will alert panel two's title. 

    <html>
<head id="Head1" runat="server">
</head>
<body>
    <script type="text/javascript">
        var menu = new Ext.menu.Menu({
            items: [{
                text: 'Menu Item',
                handler: function () {
                    alert(this.getRefOwner().up('panel').title);
                }
            }]
        });
    </script>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
        DisableViewState="true" />
    <ext:Panel runat="server" Title="Panel One" Width="400" Height="100" Layout="FitLayout">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" ID="btnOne" Text="One">
                        <CustomConfig>
                            <ext:ConfigItem Name="menu" Value="menu" Mode="Raw">
                            </ext:ConfigItem>
                        </CustomConfig>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
        </Items>
    </ext:Panel>
     <ext:Panel ID="Panel1" runat="server" Title="Panel Two" Width="400" Height="100" Layout="FitLayout">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button runat="server" ID="Button1" Text="Two">
                        <CustomConfig>
                            <ext:ConfigItem Name="menu" Value="menu" Mode="Raw">
                            </ext:ConfigItem>
                        </CustomConfig>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
        </Items>
    </ext:Panel>
   
    </form>
</body>
</html>
    Last edited by Daniil; Mar 05, 2013 at 6:33 AM. Reason: [OPEN] [#159]
  2. #2
    Feb 22, 2013, 2:31 AM
    Hello!

    Try the following:

    <%@ Page Language="C#" AutoEventWireup="true" %>
  
<%@ 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>
<head id="Head1" runat="server">
</head>
<body>
    <script type="text/javascript">
        var menu = new Ext.menu.Menu({
            listeners: {
                show: {
                    fn: function (menu) {
                        return false; // to prevent toggle of both
                    }
                } 
            },
            items: [{
                text: 'Menu Item',
                handler: function () {
                    alert(this.parentMenu.showForButton.up('panel').title);
                }
            }]
        });
    </script>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray" 
        DisableViewState="true" />
    <script>
        Ext.button.Button.prototype.showMenu = Ext.Function.createSequence(Ext.button.Button.prototype.showMenu, function() {
             this.menu.showForButton = this;
        })
    </script>
    <ext:Panel runat="server" Title="Panel One" Width="400" Height="100" Layout="FitLayout">
        <TopBar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" ID="btnOne" Text="One">
                        <CustomConfig>
                            <ext:ConfigItem Name="menu" Value="menu" Mode="Raw">
                            </ext:ConfigItem>
                        </CustomConfig>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
        </Items>
    </ext:Panel>
     <ext:Panel ID="Panel1" runat="server" Title="Panel Two" Width="400" Height="100" Layout="FitLayout">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:Button runat="server" ID="Button1" Text="Two">
                        <CustomConfig>
                            <ext:ConfigItem Name="menu" Value="menu" Mode="Raw">
                            </ext:ConfigItem>
                        </CustomConfig>
                    </ext:Button>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Mar 05, 2013, 6:33 AM
    Hello everybody,

    I think this
    handler: function () {
    alert(this.parentMenu.ownerButton.up("panel").title);
}
    should work in the initial @jchau's example.

    But I think there is a bug. Clicking some button causes toggling (visually) another button.

    I reported to Sencha and created an Issue to monitor.
    http://www.sencha.com/forum/showthread.php?257936
    https://github.com/extnet/Ext.NET/issues/159

Similar Threads

  1. How to center buttons display in the toolbar ?
    By wadhah in forum 1.x Help
    Replies: 2
    Last Post: Mar 14, 2012, 2:05 PM
  2. [CLOSED] How to disable toolbar buttons or hide toolbar TablePanel when all the tabs are closed
    By ISI in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: May 25, 2011, 9:35 AM
  3. [CLOSED] Center buttons in a toolbar
    By wazige in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 06, 2010, 12:36 PM
  4. Postbacks and validation with toolbar buttons
    By daneel in forum 1.x Help
    Replies: 0
    Last Post: Mar 12, 2010, 2:20 PM
  5. Problems with toolbar buttons
    By flaviodamaia in forum 1.x Help
    Replies: 6
    Last Post: Jan 07, 2009, 3:05 PM

Posting Permissions