如何動態增加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中的面板高度？

回答

相關問題