Ajustar la base de datos Flex a los datos

Question

Tengo filas de datos de texto que pueden variar entre 0 y 100, y todos deben estar visibles en la pantalla al mismo tiempo. El comportamiento predeterminado es correcto para la cuadrícula hasta que las filas * rowHeight > gridHeight.

Básicamente, necesito un gancho en la altura del elemento o la altura de la fila para calcularlo en función de la altura de la cuadrícula. He establecido paddingTop y paddingBottom en cero, pero todavía hay una cantidad considerable de espacio en blanco entre las filas.

Mi componente 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 () ayuda, pero el itemRender para la celda más grande que la celda, si configuro la altura de la fila en algo así como 10.

Answer 1

Gracias, inferis, eso me ayudó mucho. Este es mi componente final de la cuadrícula. En realidad, no es autosuficiente debido a algunas llamadas, pero si ayuda a otra persona a conseguir que las suyas funcionen, ¡genial!

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

Es posible que desee ver la propiedad DataGrid.variableRowHeight ya que, cuando se establece en falso (el valor predeterminado), todas las filas tendrán la misma altura que el itemRenderer más grande. También puedes escribir en tu propio ItemRenderer para cada DataColumn.

Sin embargo, si todo lo que realmente desea es establecer el alto de la fila según el número de elementos en el proveedor de datos, podría establecer la propiedad DataGrid.rowHeight de esta manera (asumiendo que su cuadrícula tiene un alto fijo, digamos 100%) :

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

(Tomo la palabra aquí porque si terminas con un valor fraccionario que se redondea, necesitarás una barra de desplazamiento)

El único problema con este enfoque, como creo que haya notado, es que el itemRenderer podría no mostrarse correctamente en una fila que es demasiado pequeña. Supongo que podría resolver esto cambiando la fuente dentro del renderizador en función de su altura.