Flex - проблема с автоматическим изменением размера сетки данных

Question

Я пытаюсь создать сетку данных, размер которой будет изменен по вертикали, чтобы обеспечить полное отображение всех средств визуализации. Кроме того,

• Рендереры переменной высоты
• Рендерер может изменить размер себя

В общем, поток событий выглядит следующим образом:

• Один из средств визуализации элементов изменяет свой размер (обычно в ответ на щелчок пользователя и т. Д.)
• Он отправляет всплывающее событие, которое обнаруживает родительская сетка данных
• DataGrid пытается изменить размер, чтобы все визуализаторы оставались видимыми в полном объеме.

В настоящее время я использую этот код в сетке данных для вычисления высоты:

height = measureHeightOfItems(0, dataProvider.length ) + headerHeight;

Это похоже на неправильную высоту. Я пробовал несколько вариантов, включая callLater (чтобы убедиться, что изменение размера завершено, чтобы мера могла работать правильно), и переопределение meausre () и вызов invalidateSize () / validateSize (), но ни один из них не работает.

Ниже приведены 3 класса, которые проиллюстрируют проблему. Нажатие кнопки в элементе рендерера изменяет размер рендерера. Сетка также должна расшириться, чтобы все 3 рендера отображались полностью.

Любые предложения будут с благодарностью.

Привет

Marty

DataGridProblem.mxml (файл приложения)

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    xmlns:view="view.*">
    <mx:ArrayCollection id="dataProvider">
        <mx:String>Item A</mx:String>
        <mx:String>Item B</mx:String>
        <mx:String>Item C</mx:String>
    </mx:ArrayCollection>
    <view:TestDataGrid
        id="dg" 
        dataProvider="{ dataProvider }"
        width="400">
        <view:columns>
            <mx:DataGridColumn dataField="text" />
            <mx:DataGridColumn itemRenderer="view.RendererButton" />
        </view:columns>
    </view:TestDataGrid>
</mx:Application>

view.TestDataGrid.as

package view
{
    import flash.events.Event;

    import mx.controls.DataGrid;
    import mx.core.ScrollPolicy;

    public class TestDataGrid extends DataGrid
    {
        public function TestDataGrid()
        {
            this.verticalScrollPolicy = ScrollPolicy.OFF;
            this.variableRowHeight = true;
            this.addEventListener( RendererButton.RENDERER_RESIZE , onRendererResize );
        }
        private function onRendererResize( event : Event ) : void
        {
            resizeDatagrid();
        }
        private function resizeDatagrid():void
        {
            height = measureHeightOfItems(0, dataProvider.length ) + headerHeight;
        }
    }
}

view.RendererButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button width="50" height="50"
        click="onClick()" />

    <mx:Script>
        <![CDATA[

            public static const RENDERER_RESIZE : String = "resizeRenderer";
            private function onClick() : void
            {
                this.height += 20;
                dispatchEvent( new Event( RENDERER_RESIZE , true ) );
            }
        ]]>
    </mx:Script>
</mx:HBox>

Answer 1

Вы можете достичь этой цели с помощью AdvancedDataGrid, используя следующий код. Если вы удалите this.headerHeight, он будет работать и для List, что заставляет меня думать, что оно должно работать для обычной старой DataGrid.

  override protected function measure():void
  {
   super.measure();

   if ( this.dataProvider )
   {
    var newHeight : int = measureHeightOfItems( 0, this.dataProvider.length ) + this.headerHeight;

    this.minHeight = newHeight;
    this.height = newHeight;
   }
  }

Answer 2

Чтобы изменить размер сетки данных во время выполнения .... используйте свойство rowcount и свяжите его с длиной поставщика данных. По мере обновления провайдера данных будет и количество строк.
Вы можете увидеть пример, как использовать rowcount в flex здесь

Answer 3

У меня есть решение этой проблемы, изменения рендерера должны синхронизироваться с вашим поставщиком данных. Тогда только метод measureHeightOfItems даст точные результаты.

Answer 4

Следующий код в gridItemRenderer помог мне:

protected function resize():void
{
    column.grid.validateSize();
    column.grid.validateDisplayList();
}

Answer 5

У меня есть немного грязное решение для такой проблемы Попробуйте это

private function ResizeGrid():void{
    if ( this.dg.maxVerticalScrollPosition > 0 ){
        this.dg.height +=5;
        setTimeout(this.ResizeGrid,100);
    }
}

И вызовите вашу функцию с некоторой задержкой, как следует

setTimeout(this.ResizeGrid,100);

Это грязный подход, но он работает для меня:)

Answer 6

В вашем подходе кроется основная проблема. ItemRenderers предназначены для последовательной визуализации элемента данных, и если вы выбрасываете текущий рендер, создаете новый и устанавливаете свойство данных нового рендера, он должен выглядеть идентично предыдущему. Вы не должны вносить временные изменения в визуализатор вне элемента данных, и визуализатор будет вести себя странным образом, когда вы сделаете это.

Я подозреваю, что если вы изменили объекты вашей модели данных, чтобы они содержали свойство count, и данные привязали высоту вашего средства визуализации к выражению "{50 + data.count * 20}", а затем увеличили обработчик щелчка кнопки data.count на 1, что это будет работать правильно. (Мой опыт показывает, что DataGrid будет перерисовывать себя с правильным размером для каждой строки, если изменения будут сделаны в результате использования свойства данных, прежде чем он вызовет makeRowsAndColumns ().) Я не пробовал этот подход для вашего примера Поэтому я не могу с уверенностью сказать, что это действительно работает, но, безусловно, это правильное мышление для работы с средствами визуализации элементов.

Answer 7

за что стоит; вы должны были использовать свойство variableRowHeight = "true" сетки данных / расширенной сетки данных.

Если вам станет легче, я создал собственное решение VBox, HBox, а потом обнаружил, что оно уже сделано !! (SNAP !!)

удачи!

Answer 8

Как бы то ни было, мне так и не удалось решить эту проблему. Код быстро стал одержим решением крайних случаев.

В итоге я отказался от подхода dataGrid и написал решение, использующее VBox и HBox для облегчения изменения размера.

Answer 9

Чтобы делать такие вещи, как ячейки / строки / столбцы переменной ширины и высоты, а также другие «расширенные» функции - попробуйте расширить AdvancedDataGrid, а не более старый, более скучный DataGrid