Подгонка сетки данных Flex к данным

Question

У меня есть строки текстовых данных, которые могут варьироваться от 0 до 100, и все они должны быть видны на экране одновременно. Поведение по умолчанию подходит для сетки, пока строки * rowHeight> gridHeight.

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

Мой компонент сетки данных ...

<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="OnCreationComplete()"
paddingTop="0"
paddingBottom="0"
>

<mx:Script>
    <![CDATA[

    private function OnCreationComplete():void
    {
        //setRowHeight(10);
    }

    override protected function setRowHeight(v:Number):void
    {
        super.setRowHeight(v);
    }

    ]]>
</mx:Script>

</mx:DataGrid>

setRowHeight () помогает, но itemRender для ячейки больше, чем ячейка, если я установлю высоту строки примерно на 10.

Answer 1

Возможно, вы захотите взглянуть на свойство DataGrid.variableRowHeight, поскольку, если для этого параметра установлено значение false (по умолчанию), все строки будут иметь такую ​​же высоту, как и самый большой itemRenderer. Вы также можете написать свой собственный itemRenderer для каждого DataColumn.

Если все, что вы действительно хотите сделать, это установить высоту строки на основе количества элементов в dataProvider, вы можете просто установить свойство DataGrid.rowHeight следующим образом (при условии, что ваша сетка имеет фиксированную высоту, скажем, 100%) :

myDataGrid.dataProvider = myArray;
myGrid.rowHeight = Math.floor((myGrid.height - myGrid.headerHeight)/myArray.length);

(я беру слово здесь, потому что, если вы получите округленное дробное значение, вам понадобится полоса прокрутки)

Единственная проблема с этим подходом, как я думаю, вы заметили, это то, что itemRenderer может отображаться неправильно в слишком маленькой строке. Я думаю, что вы могли бы решить эту проблему, изменив шрифт в рендере в зависимости от его высоты.

Answer 2

Спасибо, inferis, это мне очень помогло. Это мой последний компонент сетки. Это не совсем самодостаточно из-за нескольких вызовов, но если это помогает кому-то другому заставить их работать, прекрасно!

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="-3"
paddingBottom="-3"
resize="OnResize(event)"
>

<mx:Script>
    <![CDATA[
        import mx.containers.Panel;
    import mx.core.Application;
    import mx.events.ResizeEvent;

    protected function OnResize(event:ResizeEvent):void
    {
        this.invalidateDisplayList();
    }

/**
 *  @private
 *  Sizes and positions the column headers, columns, and items based on the
 *  size of the DataGrid.
 */
override protected function updateDisplayList(unscaledWidth:Number,
                                              unscaledHeight:Number):void
{
    if( this.collection.length > 0 ) // so don't divide by zero
    {
        var appHeight:Number = Application.application.height;
        var appMinusMenuHeight:Number = appHeight - Application.application.hboxPrintBar.height;
        var boxHeight:Number = Application.application.vboxViewAll.height;
        if( boxHeight > 0 )
        {
            var gridHeight:Number = (appMinusMenuHeight - this.headerHeight) * 0.93;
            var calcHeight:Number = gridHeight / this.collection.length;
            var calcHeightFloor:Number = Math.floor( calcHeight );
            setRowHeight( calcHeightFloor );
            //var p:Panel = this.parent as Panel;
            //p.title = calcHeightFloor.toString();
            if( calcHeightFloor <= 10 )
                this.setStyle("fontSize",calcHeightFloor);
        }
    }
    super.updateDisplayList(unscaledWidth,unscaledHeight);
}

    ]]>
</mx:Script>

</mx:DataGrid>