Accordion header. How to get click (not change) event

[Trioxera]

It seems that the accordion object is designed to be used with 'change' instead of 'click'. But I need to dispatch an event when a pane is already open and the user clicks in the header again.

I really need it for navigation purposes, to send the user to the same place used when the pane was opened.

If I use 'click' event instead of 'change', and the pane is opened ALL the pane dispatch the event!!!!, EVEN if I click in an object inside it (a Tree object).
(BTW: I do not understand this behaviour…)

Regards: Jeremy

[Sly_cardinal]

I've had a bit of a look through the source code of the Accordion class and it doesn't look like you'll be able to override the behaviour of the header click event.

However, you are able to add your own click event to each of the accordion headers which you then use to work out which header was clicked. If it was the currently selected header then you can tell the accordion to change to a different one (e.g. the original one).

Simple demonstration:


<?xml version="1.0"?>
<!-- Simple example to demonstrate the Accordion layout container. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="creationCompleteHandler(event)">

<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.controls.Button;
import mx.core.Container;
import mx.events.FlexEvent;
import mx.core.IDataRenderer;

// NOTE: This value must be between 0 and accordion.numChildren - 1 (inclusive).
private var initialSelectionIndex:int = 2;

private function creationCompleteHandler(event:FlexEvent):void
{
var curHeader:Button;
for (var i:int = 0; i < accordion.numChildren; i++)
{
curHeader = Button(accordion.getHeaderAt(i));
curHeader.addEventListener(MouseEvent.CLICK, headerClickHandler);
}
}

private function headerClickHandler(event:MouseEvent):void
{
var header:Button = Button(event.target);
var headerChild:Container = Container(IDataRenderer(header).data);
if (headerChild == accordion.selectedChild)
{
// Revert to a default value.
accordion.selectedIndex = initialSelectionIndex;
}
}

]]>
</mx:Script>

<mx:Panel title="Accordion Container Example" height="90%" width="90%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

<mx:Label width="100%" color="blue"
text="Select an Accordion navigator button to change the panel."/>

<mx:Accordion id="accordion" width="100%" height="100%">
<!-- Define each panel using a VBox container. -->
<mx:VBox label="Accordion Button for Panel 1">
<mx:Label text="Accordion container panel 1"/>
</mx:VBox>

<mx:VBox label="Accordion Button for Panel 2">
<mx:Label text="Accordion container panel 2"/>
</mx:VBox>

<mx:VBox label="Accordion Button for Panel 3">
<mx:Label text="Accordion container panel 3"/>
</mx:VBox>
</mx:Accordion>

<mx:Label width="100%" color="blue"
text="Programmatically select the panel using a Button control."/>

<mx:HBox>
<mx:Button label="Select Panel 1" click="accordion.selectedIndex=0;"/>
<mx:Button label="Select Panel 2" click="accordion.selectedIndex=1;"/>
<mx:Button label="Select Panel 3" click="accordion.selectedIndex=2;"/>
</mx:HBox>

</mx:Panel>
</mx:Application>