Fit Flex Datagrid-Daten

Question

Ich habe Zeilen von Textdaten, die zwischen 0 und 100, und alle müssen sichtbar auf dem Bildschirm zu einer Zeit variieren können. Das Standardverhalten ist in Ordnung für das Gitter, bis die Reihen * rowHeight> gridheight.

Grundsätzlich muß ich einen Haken in die Position der Höhe, oder die Zeilenhöhe, es zu berechnen, basierend auf der Höhe des Gitters. Ich habe festgelegt paddingTop und paddingBottom auf Null, aber es gibt immer noch eine beträchtliche Menge an Leerraum zwischen den Zeilen.

My Datagrid-Komponente ...

<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 () hilft, aber die itemRender für die Zelle größer als die Zelle, wenn ich die Zeilenhöhe wie 10 auf etwas festgelegt.

Answer 1

Danke inferis, die mir sehr geholfen. Dies ist meine letzte Grid-Komponente. Es ist wirklich nicht selbst wegen ein paar Call-outs enthalten ist, aber wenn es jemand anderes ihnen hilft, zu arbeiten, toll!

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

Sie können an der DataGrid.variableRowHeight Eigenschaft aussehen wollen wie, wenn diese auf false (Standardeinstellung) gesetzt ist, werden alle Zeilen wird die gleiche Höhe wie die größte itemRenderer sein. Sie können auch Ihre eigenen itemRenderer für jedes Datacolumn Blick in das Schreiben.

Wenn alles, was Sie wirklich wollen, die Zeilenhöhe auf die Anzahl der Elemente im Datenprovider, obwohl basierend eingestellt ist, können Sie nur die DataGrid.rowHeight Eigenschaft wie folgt festgelegt (vorausgesetzt, Ihr Gitter hat eine feste Höhe, sagen 100%) :

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

(Ich nehme den Boden hier, denn wenn man mit einem Bruchwert am Ende, die bis rundet, werden Sie eine Bildlaufleiste benötigen)

Das einzige Problem bei diesem Ansatz, wie ich glaube, Sie bemerkt haben, ist, dass die itemRenderer nicht richtig in einer Reihe angezeigt werden könnten, die zu klein ist. Ich denke, Sie dies, indem Sie die Schrift im Renderer basiert auf seiner Höhe lösen könnte.