How to access other panels in Flex 3 ViewStack?

Question

I have a ViewStack with 2 panels:

<mx:ViewStack id="viewstack1" height="243">
<mx:Panel id="gridPanel">
    <mx:DataGrid id="grid" right="10" left="10" top="10" bottom="10" width="300" height="150" itemClick="showDetails(event)">
        <mx:columns>
                <mx:DataGridColumn headerText="ID" dataField="Id"/>
                <mx:DataGridColumn headerText="Summary" dataField="Summary"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
    <mx:Panel id="detailsPanel">
        <mx:HBox width="100%" height="100%">
            <mx:VBox height="100%" width="228" id="detailsVbox">
                <mx:Label text="Label" id="itemTitle"/>
                <mx:Text text="Text" id="itemSummary"/>
                <mx:DataGrid height="97">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Property" dataField="col1"/>
                        <mx:DataGridColumn headerText="Value" dataField="col2"/>
                    </mx:columns>
                </mx:DataGrid>
            </mx:VBox>
            <mx:Image source="images/BackButton.png" width="50" height="50" click="viewstack1.selectedChild = gridPanel"/>

        </mx:HBox>
</mx:Panel>     
</mx:ViewStack>

I want to have the user click a grid item in the first panel and then load the data in a panel in the second panel. I can grab the value of the index for the clicked item in the itemClicked handler, but how do I access the detailsPanel to set the values based on the row info from the Grid?

Answer 1

I'm not sure if this is what you want, but you can do something like this:

private function showDetails(event:ListEvent):void {
    itemTitle.text = event.itemRenderer.data.Id;
    itemSummary.text = event.itemRenderer.data.Summary;

    //assuming that the datagrid ID from the details panel is: detailsDatagrid 
    detailsDatagrid.dataProvider = event.itemRenderer.data.Properties;

    viewstack1.selectedChild = detailsPanel;
}

In order for this to work you will also have to add a creation policy to the viewstack.

<mx:ViewStack id="viewstack1" height="243" creationPolicy="all">

This way all panels are going to be created when the viewstack is created (by default they are created only when they are needed). This ensures that you will have a reference the detailsPanel, itemTitle, itemSummary, etc... before the panel is visible.

Answer 2

As for me the best way is to use data binding. Just introduce additional field

[Bindable]
private var detailsDataProvider:ArrayCollection;

And fill it with details in showDetails method. If details data need to be obtained asynchronously (from server, for example) you can reset current details value until data received:

detailsDataProvider = null;

And then populate it with server data.

The final changes are in details data grid:

<mx:DataGrid height="97" dataProvider="{detailsDataProvider}">

Hope it helps.

Answer 3

Here this code will explain 'stackview' simple example. Using this can call panel as same.