PDA

View Full Version : [CLOSED] Collapse all Accordion children



RCN
Jun 06, 2012, 11:20 AM
Hi Folks, in version 1.x of Ext.Net it was possible to collapse all children of a Accordion, as shown in the following example:
http://examples2.ext.net/#/Layout/Accordion/Basic_in_Markup/

But in version 2.x it is not possible anymore
http://examples1.ext.net/#/Layout/Accordion/Basic_in_Markup/

i would like to know whether it's a deprecated functionality or a bug.

Thanks in advance

Daniil
Jun 06, 2012, 3:31 PM
Hi,

Confirm. But I would not consider it a bug, because it's not documented behavior.

To achieve the same behavior as it is in Ext.NET v1, I can recommend the following solution. Please set the AfterRender listener for the container with AccordionLayout.

Example

<AfterRender Fn="onAfterRender" />

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

RCN
Jun 06, 2012, 6:36 PM
Thank you Daniil, please mark it as resolved

Daniil
Jun 25, 2012, 12:18 PM
The thread is related to this one.
http://forums.ext.net/showthread.php?19694

RCN
Nov 06, 2012, 3:57 PM
For me, the following approach (add a hidden panel - line 10) is better because it prevents http://forums.ext.net/showthread.php?19694



<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:03 PM
An interesting trick, thank you for sharing!

ALobpreis
Jun 23, 2014, 12:33 PM
Hello, Daniil,

Sorry for bringing this thread up again, but I tried the AfterRender trick and it didn't work. The only difference it made was that the first panel remained expanded at all times.
The only options that seem to work are:
1) Add a hidden panel before every actual panel, and not only one at the end, as per RCN's post (that only lets you collapse the last panel, but the rest of the behavior is still there).
2) Add a hidden panel before the first panel only and use the AfterRender trick (therefore now the panel that remains expanded is this hidden one).

Might there be another way to do this instead of these somewhat "dirty" workarounds?

Thanks and regards,

Andrew

PS: Please, tell me if it's ok if I reply here or I should post a new thread in the non-Premium section.

RCN
Jun 24, 2014, 11:43 AM
ALobpreis, i will try to implement a "clean" workaround.

RCN
Jun 24, 2014, 11:56 AM
It's possible to overcome the issue by preventing the expansion of the next or the previous panel of the panel that is being collapsed, as shown below on line 39.



<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
Ext.layout.container.Accordion.override({
onComponentCollapse: function (comp) {
var me = this,
owner = me.owner,
toExpand,
expanded,
previousValue;

if (me.owner.items.getCount() === 1) {
// do not allow collapse if there is only one item
return false;
}

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) {
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
//Allows the panel to be collapsed without expand the next or the previous one
////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////
//toExpand.expand();
}

} else if (toExpand) {
toExpand.expand();
}
owner.deferLayouts = previousValue;
me.processing = false;
}
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Panel 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" />
</Items>
</ext:Panel>
</body>
</html>

RCN
Jun 24, 2014, 11:57 AM
ALobpreis, let me know whether it helps you

ALobpreis
Jun 24, 2014, 1:09 PM
Thank you very much for your effort, RCN. Unfortunately it didn't work.
Your example works but with multi=true, and in my case it's false. I tried commenting the "toExpand.expand()" in the else block but that produced the same effect as the AfterRender code: the first panel remains open, so it could work if I add a hidden panel before the first one, just like the option 2 I explained in my previous post. In that case I'd stick with the AfterRender approach in order to have less code.

Thanks again. Regards,

Andrew