What's New?

[CLOSED] Show hidden menu panel bug

  1. #1
    Jul 10, 2014, 4:28 AM

    [CLOSED] Show hidden menu panel bug

    When I click button 1 and other the first menu panel can't been collapsed, what can I do make this works good?
    <ext:Panel
    runat="server"
    Title="MenuPanel"
    Width="600"
    Height="370"
    Layout="BorderLayout">
    <Items>
        <ext:Panel
            runat="server"
            Width="350"
            Layout="Accordion"
            Split="true"
            Region="West"
            Margins="5 0 5 5"
            Border="false">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Show 1" Handler="#{pnlA}.show();" />
                        <ext:Button runat="server" Text="Show 2" Handler="#{pnlB}.show();" />
                        <ext:Button runat="server" Text="Show 3" Handler="#{pnlC}.show();" />
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:MenuPanel
                    runat="server" ID="pnlA"
                    Title="MenuPanel with Selection Saving" Hidden="True">
                    <Menu runat="server">
                        <Items>
                            <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                        </Items>
                    </Menu>
                </ext:MenuPanel>
                <ext:MenuPanel
                    runat="server" ID="pnlB"
                    Title="MenuPanel without Selection Saving" Hidden="True">
                    <Menu runat="server">
                        <Items>
                            <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                        </Items>
                    </Menu>
                </ext:MenuPanel>
                <ext:MenuPanel
                    runat="server" ID="pnlC"
                    Title="Menu with Predefined Selection" Hidden="True">
                    <Menu runat="server">
                        <Items>
                            <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                            <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                        </Items>
                    </Menu>
                </ext:MenuPanel>
            </Items>
        </ext:Panel>
    </Items>
</ext:Panel>
    Attached Thumbnails Click image for larger version.  Name: menupanel.png  Views: 47  Size: 12.3 KB  ID: 13401  
    Last edited by Daniil; Jul 23, 2014 at 12:58 PM. Reason: [CLOSED]
  2. #2
    Jul 10, 2014, 1:02 PM
    Hi @Webezi,

    By default, if an AccordionLayout has the only item, it cannot be collapsed.

    Though, I have discovered that an AccordionLayout doesn't work well at all with hidden items.

    Please try this sample with a workaround. Seems it behaves better.

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

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        Ext.layout.container.Accordion.override({
            onComponentCollapse: function (comp) {
                var me = this,
                    owner = me.owner,
                    toExpand,
                    expanded,
                    previousValue;

                if (!me.processing) {
                    me.processing = true;
                    previousValue = owner.deferLayouts;
                    owner.deferLayouts = true;
                    toExpand = comp.next() || comp.prev();

                    if (me.multi) {
                        expanded = me.getExpanded();

                        if (expanded.length === 1) {
                            toExpand.expand();
                        }

                    } else if (toExpand) {
                        toExpand.expand();
                    }
                    owner.deferLayouts = previousValue;
                    me.processing = false;
                }
            },

            onComponentExpand: function (toExpand) {
                var me = this,
                    owner = me.owner,
                    multi = me.multi,
                    animate = me.animate,
                    moveToTop = !multi && !me.animate && me.activeOnTop,
                    expanded,
                    expandedCount, i,
                    previousValue;

                if (!me.processing) {
                    me.processing = true;
                    previousValue = owner.deferLayouts;
                    owner.deferLayouts = true;
                    expanded = multi ? [] : me.getExpanded();
                    expandedCount = expanded.length;

                    for (i = 0; i < expandedCount; i++) {
                        if (toExpand != expanded[i]) { // added
                            expanded[i].collapse();
                        }
                    }

                    if (moveToTop) {
                        Ext.suspendLayouts();
                        owner.insert(0, toExpand);
                        Ext.resumeLayouts();
                    }

                    owner.deferLayouts = previousValue;
                    me.processing = false;
                }
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel
            runat="server"
            Title="MenuPanel"
            Width="600"
            Height="370"
            Layout="BorderLayout">
            <Items>
                <ext:Container runat="server" Region="Center" />
                <ext:Panel
                    ID="PanelAcc"
                    runat="server"
                    Width="350"
                    Layout="Accordion"
                    Split="true"
                    Region="West"
                    Margins="5 0 5 5"
                    Border="false">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Show 1" Handler="#{pnlA}.show();" />
                                <ext:Button runat="server" Text="Show 2" Handler="#{pnlB}.show();" />
                                <ext:Button runat="server" Text="Show 3" Handler="#{pnlC}.show();" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <Listeners>
                        <AfterLayout Handler="this.items.each(function(item) { item.hide(); })" Single="true" />
                    </Listeners>
                    <Items>
                        <ext:MenuPanel
                            ID="pnlA"
                            runat="server" 
                            Title="MenuPanel with Selection Saving">
                            <Menu runat="server">
                                <Items>
                                    <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
                        <ext:MenuPanel
                            ID="pnlB"
                            runat="server" 
                            Title="MenuPanel without Selection Saving">
                            <Menu runat="server">
                                <Items>
                                    <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
                        <ext:MenuPanel
                            ID="pnlC"
                            runat="server" 
                            Title="Menu with Predefined Selection">
                            <Menu runat="server">
                                <Items>
                                    <ext:MenuItem runat="server" Text="Item 1" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 2" Icon="ArrowRight" />
                                    <ext:MenuItem runat="server" Text="Item 3" Icon="ArrowRight" />
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>
  3. #3
    Jul 15, 2014, 6:35 AM
    it works now, but not perfect.
  4. #4
    Jul 15, 2014, 9:06 AM
    but not perfect
    Any details, please?

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. [CLOSED] Ext.net v2 Beta release: If window Hidden parameter is true, Show method don´t show window.
    By supera in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 19, 2012, 12:35 PM
  3. [CLOSED] Hidden ComboBox in Menu Panel
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 23, 2011, 6:34 AM
  4. Panel initially hidden doesn't show toolbar when shown
    By paul-2011 in forum 1.x Help
    Replies: 8
    Last Post: Apr 14, 2011, 4:20 PM
  5. [CLOSED] [1.0] TabPanel show hidden Panel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Sep 27, 2010, 4:24 PM

Tags for this Thread

Posting Permissions