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

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

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

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

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

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

Cheers, Каспар

источник

2009-10-07 21:47:54

Спасибо, что так много. Я работаю так, как хотел .. Я немного увеличил высоту сетки данных (от 23 до 30), чтобы у меня не было полосы прокрутки. , но когда я добавляю строки, каждая строка добавляет дополнительное пространство внизу. В чем причина этого? – Angeline

Попробуйте поиграть с paddingTop и paddingBottom значения в DataGrid. К сожалению, я не смог найти надежный способ вычислить точную высоту DataGrid. Я буду продолжать смотреть. –

Послушайте, только что поняли, что вы сказали - то, что делает ваш код, добавляет 30 к высоте datagrid каждый раз, когда вы добавляете строку, - но каждая новая строка добавляет меньше 30. Таким образом, DataGrid становится больше, чем он нуждается в. Попробуйте добавить менее 30 -> начать с 24 и идти оттуда. –

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

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

источник

2009-10-07 05:10:12

я дам ему попробовать .. – Angeline

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

источник

2009-10-07 06:20:25 Amarghosh

Тем не менее я получить полосу прокрутки .. – Angeline

Тогда вы собираетесь должны что-то вроде того, что предложил шарат. – Amarghosh

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

ответ

Смежные вопросы