Как динамически увеличить высоту панели в flex? - PullRequest
Новая
       53

Как динамически увеличить высоту панели в flex?

0 голосов
/ 07 октября 2009

У меня есть панель, внутри которой у меня есть сетка данных и кнопка. Функциональность заключается в том, что когда я нажимаю кнопку, в сетку данных добавляется строка. Я описал высоту и ширину панели в%. Но по мере увеличения количества строк в сетке данных из-за фиксированной высоты панели в сетке данных появляется полоса прокрутки.

Но я хочу, чтобы высота панели увеличивалась динамически по мере увеличения строк сетки данных. Кто-нибудь Помогите мне. Это мой гибкий код: 

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

Ответы [ 3 ]

1 голос
/ 08 октября 2009

Вот идеальный вариант для вас: 

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

Главное, что я сделал по-другому, - удалил VBox, который у вас был, оборачивая DataGrid. Я также отключил политику прокрутки панели. Остальное было в основном настройка. Надеюсь, это поможет.

Проверьте рабочую версию здесь . Для многих других хороших пользовательских интерфейсов и примеров кода, перейдите здесь

Ура, Каспар

1 голос
/ 07 октября 2009

это может быть грязным, но как насчет установки высоты панели в mxml равной {taskDataGrid.height + 30} или чего-то подобного ...

Просто предложение:)

0 голосов
/ 07 октября 2009

Что происходит при изменении высоты панели с 20% до 100% и высоты сетки данных с 85% до 100%?

...