Question

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

但我想在增加数据网格行时动态增加面板高度。谁来帮帮我。这是我的灵活代码：

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

Answer 1

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

只是一个建议：）

Answer 2

这是一个像素完美版本：

 <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。我还关闭了Panel的滚动策略。其余的主要是调整。希望这会有所帮助。

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

干杯，卡斯帕

Answer 3

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

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

3 个答案: