Programmatically changing a Flex Accordion container’s selected child

Hot on the heels of my previous post, “Programmatically changing a Flex Accordion container’s selected index“, comes a similar example, but this time opening an accordion item by child instead of a numeric index.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/17/programmatically-changing-a-flex-accordion-containers-selected-child/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;
            import mx.events.ListEvent;
 
            private function comboBox_change(evt:ListEvent):void {
                accordion.selectedChild = evt.currentTarget.selectedItem.data;
            }
 
            private function linkBar_itemClick(evt:ItemClickEvent):void {
                accordion.selectedChild = evt.item.data;
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="One" data="{vOne}" />
        <mx:Object label="Two" data="{vTwo}" />
        <mx:Object label="Three" data="{vThree}" />
        <mx:Object label="Four" data="{vFour}" />
        <mx:Object label="Five" data="{vFive}" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Label text="selectedChild:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{arr}"
                selectedIndex="{accordion.selectedIndex}"
                change="comboBox_change(event);" />
 
        <mx:Spacer width="100%" />
 
        <mx:Label text="selectedChild:" />
        <mx:LinkBar id="linkBar" dataProvider="{arr}"
                itemClick="linkBar_itemClick(event);" />
    </mx:ApplicationControlBar>
 
    <mx:Accordion id="accordion"
            historyManagementEnabled="false"
            width="100%"
            height="100%">
        <mx:VBox id="vOne" label="One" />
        <mx:VBox id="vTwo" label="Two" />
        <mx:VBox id="vThree" label="Three" />
        <mx:VBox id="vFour" label="Four" />
        <mx:VBox id="vFive" label="Five" />
    </mx:Accordion>
 
</mx:Application>

View source is enabled in the following example.

7 thoughts on “Programmatically changing a Flex Accordion container’s selected child

  1. the problem:

    1118: Implicit coercion of a value with static type flash.events:Event to a possibly unrelated type mx.events:ListEvent.

    how to correct it?Thank you

  2. dormouse,

    The easiest fix would be to change this line:

    private function comboBox_change(evt:ListEvent):void {
    

    To this:

    private function comboBox_change(evt:Event):void {
    

    Note: I haven’t tested this, but it should work.

    I’ll play around with this tonight after work and see if something changed between Flex 2.0.1 and Flex 3.

    I assume you’re using Flex 2.0.1, correct?

    Peter

  3. PeterD tried using your solution and it rocked although I did get the same error as dormouse at first.. then i came back here and got the answer to it immediately .. thanks again…

  4. Hi Peter,

    how would you go about sequentially moving (back and forth) through the list of child elements using ‘Next’ and ‘Previous’ buttons? And, in this scenario is there a way to prevent an accordion item opening when the header is clicked? What I’m looking to do is control the accordion only by the Prev and Next buttons.

    Stretch

  5. PeterD tried using your solution and it rocked although I did get the same error as dormouse at first.. then i came back here and got the answer to it imm

Comments are closed.