title: Flex - returning a window to its original state
body: <p>I have been tearing my hair out now for a week or so, it's time I sought some help...</p>
  
  <p>I am coding a small app to show me the next train leaving the station. Normally only the hour of the next train is shown, but if you click on the prefs button, the application window enlarges and a datagrid is shown with the trains and hours. Clicking on the close button in that state returns you to the 'start' state, or should do so.</p>
  
  <p>The problem is that the datagrid disappears, but the application window stays the same size. It should return to it's original size.</p>
  
  <p>I've been trying lots of different approaches, replacing VBoxes by Canvas or Panels but none worked. In design mode everything work as expected when switching between states.</p>
  
  <p>This is the first time I've been using states, so I might be missing something fundamental.</p>
  
  <p>Here's a code sample - I'm using 2 view states, Start and Prefs. </p>
  
  <pre><code>&lt;mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
  creationComplete="init();" 
  cornerRadius="12"
  currentState='Start' width="350" height="250"&gt;
  &lt;mx:states&gt;
      &lt;mx:State name="Start"&gt;
          &lt;mx:AddChild&gt;
              &lt;mx:VBox id="box_parent" width="100%" height="100%" verticalGap="2"&gt;
                  &lt;mx:Label text="Next Train Leaves At" textAlign="center" width="100%"/&gt;
                  &lt;mx:Label text="--:--" width="100%" height="100" fontSize="64" id="timetext" textAlign="center" fontWeight="bold"/&gt; 
                  &lt;mx:HBox width="100%" height="25" id="hbox1"&gt;
                      &lt;mx:Button label="Prefs"
                          id="buttonPrefs"
                          click="currentState='Prefs'"/&gt;
                      &lt;mx:Spacer width="70%" id="spacer1"/&gt;
                      &lt;mx:Button 
                          label="Next"
                          click="findNextTrain()" id="buttonNext"/&gt;   
                  &lt;/mx:HBox&gt;      
              &lt;/mx:VBox&gt;      
          &lt;/mx:AddChild&gt;
          &lt;mx:SetProperty name="layout" value="vertical"/&gt;
          &lt;mx:SetProperty name="width" value="350"/&gt;
          &lt;mx:SetProperty name="height" value="220"/&gt;
      &lt;/mx:State&gt;
      &lt;mx:State name="Prefs" basedOn="Start"&gt;
          &lt;mx:AddChild relativeTo="{box_parent}" position="lastChild"&gt;
              &lt;mx:DataGrid height="80%" width="100%" dataProvider="{trains}" id="traindata" editable="false"&gt;
                  &lt;mx:columns&gt;
                      &lt;mx:DataGridColumn headerText="Station" dataField="stationid"/&gt;
                      &lt;mx:DataGridColumn headerText="Leave" dataField="leave"/&gt;
                  &lt;/mx:columns&gt;
              &lt;/mx:DataGrid&gt;
          &lt;/mx:AddChild&gt;
          &lt;mx:RemoveChild target="{buttonPrefs}"/&gt;
          &lt;mx:SetProperty target="{box_parent}" name="height" value="500"/&gt;
          &lt;mx:AddChild relativeTo="{spacer1}" position="before"&gt;
              &lt;mx:Button label="Close" click="currentState='Start'"/&gt;
          &lt;/mx:AddChild&gt;
          &lt;mx:SetProperty name="height" value="570"/&gt;
      &lt;/mx:State&gt;
  &lt;/mx:states&gt;
  
  &lt;mx:transitions&gt; 
      &lt;mx:Transition fromState="*" toState="*"&gt; 
          &lt;mx:Resize target="{this}" duration="500"/&gt; 
      &lt;/mx:Transition&gt; 
  &lt;/mx:transitions&gt; 
  &lt;/mx:WindowedApplication&gt;
  </code></pre>