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

Question

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

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

Мой компонент datagrid...

<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

Спасибо, 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>

Answer 2

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

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

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

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

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