Can't drag the divider of HDividedBox

Question

hello everyone, this is my code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
<fx:Script>
  <![CDATA[
   protected function btnRemove_clickHandler(event:MouseEvent):void
    while(hbox.numChildren>0){
     hbox.removeChildAt(0);
   protected function btnAdd_clickHandler(event:MouseEvent):void
    hbox.addChild(a);
    hbox.addChild(b);
   protected function btnAddNew_clickHandler(event:MouseEvent):void
    var p:Panel = new Panel();
    p.title = "C";
    p.percentWidth = 50;
    hbox.addChild(p);
    var p2:Panel = new Panel();
    p2.title = "D";
    p2.percentWidth = 50;
    hbox.addChild(p2);
  ]]>
</fx:Script>
<fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
  <s:VerticalLayout/>
</s:layout>
<s:Button label="Remove" id="btnRemove" click="btnRemove_clickHandler(event)"/>
<s:Button label="Add" id="btnAdd" click="btnAdd_clickHandler(event)"/>
<s:Button label="AddNew" id="btnAddNew" click="btnAddNew_clickHandler(event)"/>
<mx:HDividedBox width="100%" height="100" id="hbox">
  <mx:Panel title="A" id="a" width="100%" height="100%">
  </mx:Panel>
  <mx:Panel title="B" id="b" width="100%" height="100%">
  </mx:Panel>
</mx:HDividedBox>
</s:Application>
my problem is :
when i first load the application,i can drag the divider of  HDividedBox.
after i click the remove button,remove all children of HDividedBox.
i click Add Button  ,add the old child, but i can't drag the divider again.
i click AddNew Button ,sometime can drag the divider but sometime can't
it is so strange.i cost a lot of time on it ,but can't find the reason.i need some help to resolve it,thanks!

Answer 1

Try adding hbox.validateNow() after adding or removing children?