how to increase the panel height in flex dynamically?

I have a panel inside which I have a datagrid and a button. The functionality is that when I click the button, an row gets added to the data grid. I have described the pane height and width in %. But as the number of rows in the data grid increase, due to fixed panel height, a scroll bar appears in the data grid.

But I want the panel height to increase dynamically as I increase the data grid rows. Some one help me. This is my flex code:

<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
        import mx.collections.XMLListCollection;


        [Bindable]

         private var initDG:ArrayCollection = new ArrayCollection([
            {Select:true},

        ]); 

         private function addTaskRow(event:MouseEvent):void
        {
            taskDataGrid.dataProvider.addItem(
                {

                }
            );
        }

    ]]>
</mx:Script>

<mx:Panel x="20" y="250" width="75%" height="20%" layout="absolute" id="taskPanel" title="Review Task Details" >
<mx:VBox width="100%" height="100%" >

    <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}"  variableRowHeight="true" editable="true" height="85%" width="100%">
         <mx:columns>
            <mx:DataGridColumn dataField="Select" 
            editable="true" 
            rendererIsEditor="true" 
            itemRenderer="mx.controls.CheckBox" 
            editorDataField="selected"/>

            <mx:DataGridColumn dataField="TaskName"
            width="220"
            editable="true" 
            rendererIsEditor="true" 
            itemRenderer="components.taskComponent"/>

       开发者_如何学JAVA     <mx:DataGridColumn dataField="TaskId"
            itemRenderer="mx.controls.TextInput" />

            <mx:DataGridColumn dataField="TaskType"
                itemRenderer="mx.controls.TextInput"/>

             <mx:DataGridColumn dataField="ProjectWon"
                itemRenderer="mx.controls.TextInput"/>

            <mx:DataGridColumn dataField="ItemCode"
                itemRenderer="mx.controls.TextInput"/>

            <mx:DataGridColumn dataField="ItemVersion"
                itemRenderer="mx.controls.TextInput"/>


         </mx:columns>
    </mx:DataGrid>

    <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/>

</mx:VBox>
</mx:Panel>  

Here is a pixel perfect version for you:

 <fx:Script>
 <![CDATA[
     import mx.collections.ArrayCollection;
     import mx.rpc.events.ResultEvent;
     import mx.collections.XMLListCollection;


     [Bindable]

      private var initDG:ArrayCollection = new ArrayCollection([
         {Select:true},

     ]); 

      private function addTaskRow(event:MouseEvent):void
     {
         taskDataGrid.dataProvider.addItem(
             {

             }
         );

         taskDataGrid.height += 23;
     }

 ]]>

     <mx:DataGrid id="taskDataGrid" dataProvider="{initDG}"  variableRowHeight="true" editable="true" 
      width="100%"  paddingBottom="0" paddingTop="1" height="47">
         <mx:columns>
             <mx:DataGridColumn dataField="Select"
           editable="true" 
           rendererIsEditor="true" 
           itemRenderer="mx.controls.CheckBox" 
           editorDataField="selected"/>

          <mx:DataGridColumn dataField="TaskId"
          itemRenderer="mx.controls.TextInput" />

          <mx:DataGridColumn dataField="TaskType"
              itemRenderer="mx.controls.TextInput"/>

           <mx:DataGridColumn dataField="ProjectWon"
              itemRenderer="mx.controls.TextInput"/>

          <mx:DataGridColumn dataField="ItemCode"
              itemRenderer="mx.controls.TextInput"/>

          <mx:DataGridColumn dataField="ItemVersion"
              itemRenderer="mx.controls.TextInput"/>


              </mx:columns>
     </mx:DataGrid>

     <mx:Button id="addTask" label="Add Task" click="addTaskRow(event)"/>

The main thing I did differently was to remove the VBox that you had wrapping the DataGrid. I also turned off the scroll policy of the Panel. The rest was mainly tweaking. Hope this helps.

Check out a working version here. For lots of other good UI and code examples, go here

Cheers, Caspar

this might be dirty but, how about setting the height of the panel in mxml to {taskDataGrid.height + 30} or something similar..

Just a suggestion :)

What happens when you change panel's height from 20% to 100% and data grid's height from 85% to 100%?