PDA

View Full Version : [CLOSED] Raising Accordion´s BeforeExpand event wrongly



RCN
Jun 21, 2012, 8:38 PM
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.
http://forums.ext.net/showthread.php?19387-CLOSED-Collapse-all-Accordion-children



<script type="text/javascript">
var onAfterRender = function (ct) {
ct.items.each(function (item) {
item.on("beforeexpand", function () {
return !this.layout.processing;
},
ct);
});
};
</script>




<ext:Panel ID="Window1" runat="server" Title="Accordion" Width="250" Height="400"
Maximizable="true" BodyBorder="0" Icon="ApplicationTileVertical" Layout="Accordion">
<LayoutConfig>
<ext:AccordionLayoutConfig Multi="true" />
</LayoutConfig>
<Items>
<ext:Panel ID="Panel1" runat="server" Title="Settings">
<Listeners>
<BeforeExpand Handler="alert('panel 1');" />
</Listeners>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" Title="Even More Stuff">
<Listeners>
<BeforeExpand Handler="alert('panel 2');" />
</Listeners>
</ext:Panel>
</Items>
<Listeners>
<AfterRender Fn="onAfterRender" />
</Listeners>
</ext:Panel>

Daniil
Jun 21, 2012, 9:36 PM
Hi,

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:

Multi="true"
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.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE>

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

<script type="text/javascript" src="resources/js/MyAccordion.js"></script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Panel
runat="server"
Title="Accordion"
Width="250"
Height="400"
Layout="Accordion">
<CustomConfig>
<ext:ConfigItem
Name="layout"
Value="{ type : 'myaccordion', multi : true }"
Mode="Raw" />
</CustomConfig>
<Items>
<ext:Panel runat="server" Title="Settings">
<Listeners>
<BeforeExpand Handler="alert('panel 1');" />
</Listeners>
</ext:Panel>
<ext:Panel runat="server" Title="Even More Stuff">
<Listeners>
<BeforeExpand Handler="alert('panel 2');" />
</Listeners>
</ext:Panel>
</Items>
</ext:Panel>
</form>
</body>
</html>


MyAccordion.js

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,
toExpand,
expanded,
previousValue;

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) {
toExpand.expand();
}

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

RCN
Jun 23, 2012, 7:04 PM
ok Daniil, please mark it as resolved.

RCN
Nov 06, 2012, 3:59 PM
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">
<LayoutConfig>
<ext:AccordionLayoutConfig Multi="true" />
</LayoutConfig>
<Items>
<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" />
</Items>
</ext:Panel>

Daniil
Nov 06, 2012, 5:02 PM
An interesting trick, thank you for sharing!