如何动态增加flex中的面板高度？答案

【问题标题】：how to increase the panel height in flex dynamically?如何动态增加flex中的面板高度？
【发布时间】：2010-12-04 12:20:25
【问题描述】：

我有一个面板，里面有一个数据网格和一个按钮。功能是当我单击按钮时，会在数据网格中添加一行。我已经以百分比描述了窗格的高度和宽度。但随着数据网格中行数的增加，由于面板高度固定，数据网格中会出现滚动条。

但我希望面板高度随着数据网格行的增加而动态增加。谁来帮帮我。这是我的弹性代码：

<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"/>

            <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>

【问题讨论】：

标签： apache-flex datagrid panel

【解决方案1】：

这是适合您的像素完美版本：

 <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)"/>

我所做的主要不同之处在于删除了包装 DataGrid 的 VBox。我还关闭了面板的滚动策略。其余的主要是调整。希望这会有所帮助。

查看工作版本here。更多其他优秀的 UI 和代码示例，请转到 here

干杯，卡斯帕

【讨论】：

非常感谢.. 我按我的意愿工作.. 我稍微增加了数据网格高度（从 23 到 30），这样我就没有滚动条了。但是当我添加行时，每行的底部都会添加一些额外的空间。这是什么原因？
尝试摆弄 DataGrid 上的 paddingTop 和 paddingBottom 值。不幸的是，我找不到一种可靠的方法来计算 DataGrid 的确切高度。不过我会继续寻找。
等一下，刚刚意识到你所说的 - 你的代码正在做的是每次添加一行时在数据网格的高度上增加 30 - 但每个新行添加的数量少于 30。这样，DataGrid 变得比它需要的大。尝试添加小于 30 -> 从 24 开始并从那里向上。

【解决方案2】：

当您将面板的高度从 20% 更改为 100% 并将数据网格的高度从 85% 更改为 100% 时会发生什么？

【讨论】：

那么你将不得不按照 sharat 的建议去做。

【解决方案3】：

这可能很脏，但是，如何将 mxml 中的面板高度设置为 {taskDataGrid.height + 30} 或类似的东西..

只是一个建议:)

【讨论】：