[CLOSED] Raising Accordion´s BeforeExpand event wrongly

  1. #1
    I folks, i have a accordion with two sub-panels. When the first one is collapsed and then the second one is expanded the BeforeExpand of the first panel is raised.

    To reproduce the problem, please do the following steps:
    • Collapsed the first panel
    • Collapsed the second panel

    i think the reason is because the beforeexpand expand was overriden. I did it because i need to collapse all the children of an accordion, as shown in the following thread.

    <script type="text/javascript">
        var onAfterRender = function (ct) {
            ct.items.each(function (item) {
                item.on("beforeexpand", function () {
                    return !this.layout.processing;
    <ext:Panel ID="Window1" runat="server" Title="Accordion" Width="250" Height="400"
        Maximizable="true" BodyBorder="0" Icon="ApplicationTileVertical" Layout="Accordion">
            <ext:AccordionLayoutConfig Multi="true" />
            <ext:Panel ID="Panel1" runat="server" Title="Settings">
                    <BeforeExpand Handler="alert('panel 1');" />
            <ext:Panel ID="Panel2" runat="server" Title="Even More Stuff">
                    <BeforeExpand Handler="alert('panel 2');" />
            <AfterRender Fn="onAfterRender" />
    Last edited by Daniil; Jun 25, 2012 at 12:18 PM. Reason: [CLOSED]
  2. #2

    Well, the solution I have suggested earlier just prevents the panel to be expanded. But the AccordionLayout still tries to expand that panel. So, its BeforeExpand listeners are triggered.

    What about to listen the Expand event instead of BeforeExpand? It seems to be the simplest solution in your case.

    I can't see the functionality in the AccordionLayout to suite both your needs:
    and the possibility to collapse all panels.

    Generally, you could extend/override the initial AccordionLayout class to get the behavior you need. I think you need to override the onComponentCollapse method. I have presented the original code of that method in the example below.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <script type="text/javascript" src="resources/js/MyAccordion.js"></script>
        <form runat="server">
            <ext:ResourceManager runat="server" />
                        Value="{ type : 'myaccordion', multi : true }"
                        Mode="Raw" />
                    <ext:Panel runat="server" Title="Settings">
                            <BeforeExpand Handler="alert('panel 1');" />
                    <ext:Panel runat="server" Title="Even More Stuff">
                            <BeforeExpand Handler="alert('panel 2');" />
    Ext.define('Ext.layout.container.MyAccordion', {
        extend: 'Ext.layout.container.Accordion',
        alias: ['layout.myaccordion'],
        alternateClassName: 'Ext.layout.MyAccordionLayout',
        onComponentCollapse: function(comp) {
            var me = this,
                owner = me.owner,
            if (!me.processing) {
                me.processing = true;
                previousValue = owner.deferLayouts;
                owner.deferLayouts = true;
                toExpand = comp.next() || comp.prev();
                // If we are allowing multi, and the "toCollapse" component is NOT the only expanded Component,
                // then ask the box layout to collapse it to its header.
                if (me.multi) {
                    expanded = me.owner.query('>panel:not([collapsed])');
                    // If the collapsing Panel is the only expanded one, expand the following Component.
                    // All this is handling fill: true, so there must be at least one expanded,
                    if (expanded.length === 1) {
                } else if (toExpand) {
                owner.deferLayouts = previousValue;
                me.processing = false;
  3. #3
    ok Daniil, please mark it as resolved.
  4. #4
    For me, the following approach (add a hidden panel - line 10) is better

    <ext:Panel ID="Panel1" Margin="10" Title="Accordion" Width="250" Height="200" Icon="ApplicationTileVertical"
        Layout="Accordion" runat="server">
            <ext:AccordionLayoutConfig Multi="true" />
            <ext:Panel Title="Ext" runat="server" />
            <ext:Panel Title="Net" runat="server" />
            <ext:Panel Title="Ext.Net" runat="server" />
            <ext:Panel Title="Hidden" Hidden="true" runat="server" />
  5. #5
    An interesting trick, thank you for sharing!

Similar Threads

  1. Replies: 8
    Last Post: Jun 20, 2012, 6:48 PM
  2. Replies: 5
    Last Post: Nov 11, 2010, 7:33 PM
  3. [CLOSED] Accordion + GridPanel
    By Zarzand in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 02, 2009, 8:15 PM
  4. [CLOSED] Accordion KeepActive
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 23, 2009, 8:15 AM
  5. [CLOSED] Accordion Question
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 16, 2009, 10:39 PM

Tags for this Thread

Posting Permissions