The following example demonstrates how you can add embedded icons to a Flex Accordion container.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/adding-icons-to-a-flex-accordion-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="assets/bulletCheck.png")]
private var BulletCheck:Class;
[Bindable]
[Embed(source="assets/bulletWarning.png")]
private var BulletWarning:Class;
[Bindable]
[Embed(source="assets/bulletCritical.png")]
private var BulletCritical:Class;
]]>
</mx:Script>
<mx:XML id="itemsXML">
<items>
<item label="Item 1" status="warning" />
<item label="Item 2" status="critical" />
<item label="Item 3" status="critical" />
<item label="Item 4" status="check" />
<item label="Item 5" status="warning" />
<item label="Item 6" status="check" />
<item label="Item 7" status="check" />
<item label="Item 8" status="critical" />
</items>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Label text="selectedIndex: {accordion.selectedIndex}" />
<mx:Spacer width="100" />
<mx:Label text="label: {accordion.getHeaderAt(accordion.selectedIndex).label}" />
</mx:ApplicationControlBar>
<mx:Accordion id="accordion"
width="400"
height="200">
<mx:VBox label="Success"
icon="{BulletCheck}"
width="100%"
height="100%">
<mx:DataGrid id="successGrid"
dataProvider="{itemsXML.item.(@status == 'check')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
<mx:VBox label="Warning"
icon="{BulletWarning}"
width="100%"
height="100%">
<mx:DataGrid id="warningGrid"
dataProvider="{itemsXML.item.(@status == 'warning')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
<mx:VBox label="Critical"
icon="{BulletCritical}"
width="100%"
height="100%">
<mx:DataGrid id="criticalGrid"
dataProvider="{itemsXML.item.(@status == 'critical')}"
width="100%"
height="100%">
</mx:DataGrid>
</mx:VBox>
</mx:Accordion>
</mx:Application>
View source is enabled in the following example.
{ 3 comments… read them below or add one }
I really like this simple example of adding icons to an Accordion.
Very helpful!
Would you know how to change the behavior of an Accordion?
I am trying to figure out a way to customize an Accordion so that the VBoxes inside will remain open unless I click a triangle icon that I place on the VBox.
Perhaps an Accordian is not what I really want to use, but so far, it seems like an Accordion has everything I want, except that it only allows one page, or VBox, to be open at a time.
Do you have any ideas on how to override the behavior of an Accordion so that it only opens and closes each section when I call that event? (Also, what event would I call?)
Thanks in advanced!
L. Jay Adams
If I want to add icon into rows of AdvancedDataGrid, then what I must do? Can you instruct me. Thanks much.
chary
hei
i am in the situation in which i want to add an icon that is a preview of what happen in the content of accordion tab.
so i need to add something more that a class name, i want to have control to instance for add listeners and treat it like a view, in the same way i treat content of accordion.
how can i do??