Adatta il datagrid Flex ai dati

Question

Ho file di dati di testo che possono variare tra 0 e 100 e tutti devono essere visibili sullo schermo contemporaneamente. Il comportamento predefinito va bene per la griglia fino a quando le righe * rowHeight > GridHeight.

Fondamentalmente ho bisogno di un gancio per l'altezza dell'oggetto, o l'altezza della riga per calcolarlo in base all'altezza della griglia. Ho impostato paddingTop e paddingBottom su zero, ma c'è ancora una notevole quantità di spazio bianco tra le righe.

Il mio 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 () aiuta, ma itemRender per la cella più grande della cella, se imposto l'altezza della riga su qualcosa di simile a 10.

Answer 1

Grazie inferis, mi ha aiutato molto. Questo è il mio componente griglia finale. Non è davvero autonomo a causa di alcune chiamate, ma se aiuta qualcun altro a far funzionare il proprio, fantastico!

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

Potresti voler guardare la proprietà DataGrid.variableRowHeight come, quando questa è impostata su false (impostazione predefinita) tutte le righe avranno la stessa altezza dell'oggetto itemRenderer più grande. Puoi anche cercare di scrivere il tuo itemRenderer per ogni DataColumn.

Se tutto ciò che vuoi veramente fare è impostare l'altezza della riga in base al numero di elementi nel dataProvider, puoi semplicemente impostare la proprietà DataGrid.rowHeight in questo modo (supponendo che la tua griglia abbia un'altezza fissa, diciamo 100%) :

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

(Prendo la parola qui perché se finisci con un valore frazionario che arrotonda per eccesso, avrai bisogno di una barra di scorrimento)

L'unico problema con questo approccio, come penso che tu abbia notato, è che itemRenderer potrebbe non essere visualizzato correttamente in una riga troppo piccola. Immagino che potresti risolverlo cambiando il carattere all'interno del renderer in base alla sua altezza.