7/12/2010 2:21:42 AM
Title:
headerRenderer for Accordion
Hi all,
i am accordian in one of my application module,Now i want to have three functionalities in the accordian bars.
i want two labels ,one on the left and the other in the middle and an icon on the right of the pane/bar of the accordian.
eg: labelonLeft labelinMiddle icononRight
thanks
Tyler
Points: 430
Posts:0
7/12/2010 6:31:28 AM
i think you need to extend the accordion class and add the functionality. I will try
7/12/2010 9:46:34 PM
budy see this , this way you can display label on left middle and an icon on the right side of the Accordion component in flex with actionscript 3. I have not extended the Accordion but its a workaround for your problem. See the source code of example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Accordion >
<mx:headerRenderer>
<mx:Component>
<mx:Button labelPlacement="left" textAlign="left" />
</mx:Component>
</mx:headerRenderer>
<mx:Panel icon="@Embed('yourIcon.swf')" title="Content1" label="Heading Left1 Heading Middle1" width="300" height="200" />
<mx:Panel icon="@Embed('yourIcon.swf')" title="Content2" label="Heading Left2 Heading Middle2" width="300" height="200" />
</mx:Accordion>
</mx:Application>
7/12/2010 9:58:01 PM
To design a complex Accordion header you can use the "CanvasButtonAccordionHeader" class provided by flexlib. Actually the headerRenderer property does not accept any other component than a button instance. So this class provides the functionality of adding other components and presenting them together as button to the accordion. See this link for more info on this class
http://flexlib.googlecode.com/svn/trunk/docs/flexlib/containers/accordionClasses/CanvasButtonAccordionHeader.html
you can download flexlib from this link
http://code.google.com/p/flexlib/
This is how the code for headerRenderer Component for accordion
<?xml version="1.0" encoding="utf-8"?>
<fl:CanvasButtonAccordionHeader xmlns:fl='flexlib.containers.accordionClasses.*' xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="26" styleName="tlAccordionHeader" mouseChildren="true">
<!-- Place your components like(hbox,label etc) here for designing header -->
</fl:CanvasButtonAccordionHeader>