Flex 3 Accordion control to navigate a viewstack control

I need help with some code to use a accordion navigator to control a vewstack navigator.
So when the user clicks on the a specific accordion header this should change the view stack navigator.

Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Canvas x="5" y="10" id="Enquiries" label="Enquiries" width="100%" height="100%" borderStyle="solid">
		<mx:HBox borderStyle="inset" width="742" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" height="34" y="10" x="10" backgroundColor="#585757" cornerRadius="10" dropShadowColor="#690F0F" dropShadowEnabled="true">
			<mx:Button label="New Enquiry"/>
			<mx:Button label="New Quote"/>
			<mx:Button label="Appointment"/>
		</mx:HBox>
		<mx:HDividedBox x="10" y="52" width="740" height="489"  >
			<mx:VDividedBox width="30%" height="100%">
				<mx:Accordion width="100%" height="70%">
					<mx:Canvas label="Quotes" width="100%" height="100%">
					</mx:Canvas>
				</mx:Accordion>
				<mx:TextArea width="100%" height="30%"/>
			</mx:VDividedBox>
		<mx:VDividedBox width="70%" height="100%">
			<mx:ViewStack id="VS_AllEnquires" borderStyle="solid" width="100%" height="80%">
				<mx:Canvas id="AllEnquiries" label="AllEnquiries" width="100%" height="100%">
					<mx:DataGrid id="DG_AllEnquiries" width="100%" height="100%">
						<mx:columns>
							<mx:DataGridColumn headerText="Enquiry Date" dataField="col1"/>
							<mx:DataGridColumn headerText="Enquiry Source" dataField="col2"/>
							<mx:DataGridColumn headerText="Personell" dataField="col3"/>
						</mx:columns>
					</mx:DataGrid>
				</mx:Canvas>
			</mx:ViewStack>
			<mx:TextArea width="100%" height="20%"/>
		</mx:VDividedBox>
		</mx:HDividedBox>
	</mx:Canvas>
	
</mx:Application>

Open in new window

X-quisiteAsked:
Who is Participating?
 
mplordConnect With a Mentor Commented:
Currently you only have one accordion canvas and one viewstack canvas, so to demonstrate switching these I've added second views to both.

There is a simpler way to achieve the following, just for example using BindProperty to directly set the selectedIndex of the ViewStack to equal the selectedIndex of the Accordion, but using the BindSetter let's you have some choice over how to set the selectedIndex of the ViewStack in case you need it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">

      <mx:Script>
            <![CDATA[
                  import mx.binding.utils.BindingUtils;
                  
            
                  private function init():void
                  {
                        BindingUtils.bindSetter(setVS, accordion, "selectedIndex");      
                  }
                  
                  private function setVS(selectedIndex:Number):void
                  {
                        VS_AllEnquires.selectedIndex = selectedIndex;
                  }
            ]]>
      </mx:Script>

        <mx:Canvas x="5" y="10" id="Enquiries" label="Enquiries" width="100%" height="100%" borderStyle="solid">
                <mx:HBox borderStyle="inset" width="742" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5" height="34" y="10" x="10" backgroundColor="#585757" cornerRadius="10" dropShadowColor="#690F0F" dropShadowEnabled="true">
                        <mx:Button label="New Enquiry"/>
                        <mx:Button label="New Quote"/>
                        <mx:Button label="Appointment"/>
                </mx:HBox>
                <mx:HDividedBox x="10" y="52" width="740" height="489"  >
                        <mx:VDividedBox width="30%" height="100%">
                                <mx:Accordion id="accordion" width="100%" height="70%">
                                        <mx:Canvas label="Quotes" width="100%" height="100%">
                                        </mx:Canvas>
                                        <mx:Canvas label="View2" width="100%" height="100%">
                                        </mx:Canvas>
                                </mx:Accordion>
                                <mx:TextArea width="100%" height="30%"/>
                        </mx:VDividedBox>
                <mx:VDividedBox width="70%" height="100%">
                        <mx:ViewStack id="VS_AllEnquires" borderStyle="solid" width="100%" height="80%">
                                <mx:Canvas id="AllEnquiries" label="AllEnquiries" width="100%" height="100%">
                                        <mx:DataGrid id="DG_AllEnquiries" width="100%" height="100%">
                                                <mx:columns>
                                                        <mx:DataGridColumn headerText="Enquiry Date" dataField="col1"/>
                                                        <mx:DataGridColumn headerText="Enquiry Source" dataField="col2"/>
                                                        <mx:DataGridColumn headerText="Personell" dataField="col3"/>
                                                </mx:columns>
                                        </mx:DataGrid>
                                </mx:Canvas>
                                <mx:Canvas label="View2" width="100%" height="100%">
                                </mx:Canvas>
                        </mx:ViewStack>
                        <mx:TextArea width="100%" height="20%"/>
                </mx:VDividedBox>
                </mx:HDividedBox>
        </mx:Canvas>
       
</mx:Application>
0
 
X-quisiteAuthor Commented:
Thats great, just what i needed.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.