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

我有一个面板里面有一个数据网格和一个按钮。功能是当我点击按钮时，一行被添加到数据网格。我已经用％描述了窗格的高度和宽度。但随着数据网格中行数的增加，由于面板高度固定，数据网格中会出现滚动条。如何动态增加flex中的面板高度？

但我希望面板高度动态增加，因为我增加了数据网格行。谁来帮帮我。这是我的Flex代码：

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

来源

2009-10-07 Angeline

这里是一个像素完美的版本供您：

<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中的垂直框。我也关闭了小组的滚动政策。其余的主要是调整。希望这有助于。

查看工作版本here。对于很多其他优秀的用户界面和代码示例，请here

干杯，卡斯帕

来源

2009-10-07 21:47:54

非常感谢你..我按照自己的意愿工作..我增加了数据网格高度（从23到30），这样我就没有滚动条了。但当我添加行时，每行添加一些额外的空间在底部。这是什么原因？ – Angeline 2009-10-08 06:25:06

尝试摆弄DataGrid上的paddingTop和paddingBottom值。不幸的是，我找不到一个可靠的方法来计算DataGrid的确切高度。我会继续寻找。 – 2009-10-08 08:03:09

挂起，刚刚意识到你所说的 - 你的代码正在做的是每次添加一行时将数据网格的高度增加30--但每个新行增加的数量少于30.这样，DataGrid就会比它大需要。尝试添加少于30 - >从24开始，并从那里上去。 – 2009-10-08 08:08:48

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

只是一个建议:)

来源

2009-10-07 05:10:12

我会试试看.. – Angeline 2009-10-07 05:19:48

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

来源

2009-10-07 06:20:25 Amarghosh

不过我得到的滚动条.. – Angeline 2009-10-07 08:24:04

那么你会得做一些类似sharat建议的事情。 – Amarghosh 2009-10-07 08:28:27

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

回答

相关问题