1 Reply Latest reply on May 5, 2010 5:06 AM by David_F57

    How to Dynamically Display Different ViewStack component without using State?

    Gene Qian

      I have a type column in a datagrid record, when type = A, I want to display ViewStack A, when type = B, I want to display ViewStack B, any body can give me some clues? sample code is best. Thanks a lot. BTW, I don't want to use state to control them, as both ViewStacks are already within the same application state.

        • 1. Re: How to Dynamically Display Different ViewStack component without using State?
          David_F57 Level 5

          hi,

           

          you can try something like this.....

           

           

          David.

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">

           

          <mx:Script>

          <![CDATA[

          import mx.collections.ArrayCollection;

          import mx.events.ListEvent;

          [Bindable] private var arr:ArrayCollection = new ArrayCollection([

          {info:"record 1", type:"A"},

          {info:"record 2", type:"B"},

          {info:"record 3", type:"A"},

          {info:"record 4", type:"B"}

          ]);

           

          protected function dg_changeHandler(event:ListEvent):void

          {

          if (arr[dg.selectedIndex].type=="A") tn1.visible = true else tn1.visible = false;

          tn2.visible = !tn1.visible;

          }

           

          ]]>

          </mx:Script>

           

          <mx:DataGrid id="dg" x="279" y="239" dataProvider="{arr}" change="dg_changeHandler(event)">

          <mx:columns>

          <mx:DataGridColumn headerText="Info" dataField="info"/>

          <mx:DataGridColumn headerText="Type" dataField="type"/>

          </mx:columns>

          </mx:DataGrid>

          <mx:TabNavigator x="279" y="408" width="200" height="200" id="tn1">

          <mx:Canvas label="Tab 1" width="100%" height="100%">

          </mx:Canvas>

          </mx:TabNavigator>

          <mx:TabNavigator x="507" y="408" width="200" height="200" id="tn2">

          <mx:Canvas label="Tab 1" width="100%" height="100%">

          </mx:Canvas>

          </mx:TabNavigator>

           

          </mx:Application>