Components behavior after state change

Components behavior after state change

Files Index.mxml , Tab1.mxml , Tab2.mxml, EditRole.mxml.

Index.mxml has two tabs Tab1 and Tab2.
Tab1 - Has a edit button and a combo Box which is populated with xml data from external file (i.e ' role.xml ' which has role tag with 'name' as attribute) and comboBox selectedItem is set to zero.On click of edit button currentState changes to editState, where in the selectedItem from combo box is edited (i.e role name).Edit state has save and cancel button on click currentState changes to viewState,displaying back the combo box with edit button.
Tab2 - Displays the same xml data in List.

Working fine :
Select any value from comboBox and click on Tab2 and click back on Tab1 the selectedIndex is reset to zero.

Issue :
Select value from comboBox and click edit (state changes to editState) make changes and click save/cancel (state changes to viewState) the comboBox is set to selectedIndex zero. Select the value other than first item in comboBox, click Tab2 and click Tab1 the comboBox selectedItem is not reset to zero the value previously selected remains as selected. Although on Alert.show(String(comboBox.selectedIndex)) displays 0 !!
After state change the values are not displaying the data they are assigned.

Can anybody please explain reason for this behavior.

Code :
Below code is simplest way I could put the above issue.

Index.mxml -

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:custom="*"  title="Read Write File">
 <mx:TabNavigator>
   <custom:Tab1 label="Tab1"/>
   <custom:Tab2 label="Tab2"/>
  </mx:TabNavigator>
</mx:WindowedApplication>

Tab1.mxml -

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="*" creationComplete="loadData()" show="loadData()">
  <mx:Script>
   <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.controls.Alert;
     
    private var roleData : ArrayCollection = new ArrayCollection();
    private var permData : ArrayCollection = new ArrayCollection();
    private var roleList : XMLList ;

    private function loadData():void{
     var file:File = File.desktopDirectory.resolvePath("role.xml");
     var fileStream:FileStream = new FileStream();
     fileStream.open(file, FileMode.READ);
     var xmlData:XML=XML (fileStream.readUTFBytes(fileStream.bytesAvailable));    
     fileStream.close();
     roleList = new XMLList(xmlData.elements("role"));
     for(var index:int=0;index<roleList.length();index++){
      roleData.addItem(String(roleList[index].attribute("name")[0]));
     }
     roleCombo.dataProvider = roleData.source;
     roleCombo.selectedIndex = 0;
     Alert.show(String(roleCombo.selectedIndex));
    }
  ]]>
</mx:Script>
 <mx:states>
  <mx:State name="editRoleState">
   <mx:RemoveChild target="{viewRoleForm}"/>
   <mx:AddChild position="firstChild">
     <custom:editRole editRoleName="{roleCombo.selectedItem}"/>
   </mx:AddChild>
   </mx:State>
  </mx:states>
  <mx:Form id="viewRoleForm">
   <mx:FormItem label="Role">
    <mx:ComboBox id="roleCombo"/>
   </mx:FormItem>
   <mx:FormItem>  
    <mx:Button label="Edit" click="currentState='editRoleState'"/>
   </mx:FormItem>
  </mx:Form>
</mx:Canvas>

EditRole.mxml -

<?xml version="1.0" encoding="UTF-8" ?>
<mx:Canvas  xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="*" creationComplete="loadRole()" width="100%" height="100%">
 <mx:Script>
  private function loadRole():void{
   roleName.text = String(editRoleName);
  }
</mx:Script>
  <mx:states>
   <mx:State name="viewRoleState">
    <mx:RemoveChild target="{editRoleForm}"/>
    <mx:AddChild position="firstChild">
     <custom:Tab1  id="viewRoleName"/>
    </mx:AddChild>
   </mx:State>
  </mx:states>
  <mx:Object id="editRoleName"/>
  <mx:Form id="editRoleForm">
  <mx:FormItem label="Role"  required="true">
   <mx:TextInput id="roleName"/>
  </mx:FormItem>
  <mx:FormItem>
   <mx:Button  id="saveButton" label="Save"  click="currentState='viewRoleState';"/>    
   <mx:Button  id="cancelButton" label="Cancel" click="currentState='viewRoleState';" />
   </mx:FormItem>
  </mx:Form>
</mx:Canvas>

Tab2.mxml -
Displays the role in List

Add Comment

Put code snippets inside language tags:
[language] [/language]

Examples:
[javascript] [/javascript]
[actionscript] [/actionscript]
[csharp] [/csharp]

See here for supported languages.

Javascript must be enabled to submit anonymous comments - or you can login.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.