Adapter la grille de données Flex aux données

Question

J'ai des lignes de données textuelles pouvant varier entre 0 et 100, et toutes doivent être visibles à l'écran en même temps. Le comportement par défaut est correct pour la grille jusqu'à ce que les lignes * rowHeight > gridHeight.

J'ai besoin d'un crochet dans la hauteur de l'article ou de la hauteur de la ligne pour le calculer en fonction de la hauteur de la grille. J'ai réglé paddingTop et paddingBottom sur zéro, mais il reste encore beaucoup d'espaces entre les lignes.

Mon composant 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 () aide, mais l'itemRender de la cellule plus grande que la cellule, si je règle la hauteur de la ligne à 10.

Answer 1

Merci inferis, cela m'a beaucoup aidé. Ceci est mon dernier composant de la grille. Ce n'est pas vraiment autonome à cause de quelques appels, mais si cela aide quelqu'un à faire en sorte que le leur fonctionne, tant mieux!

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

Vous pouvez consulter la propriété DataGrid.variableRowHeight en indiquant que, si cette propriété est définie sur false (valeur par défaut), toutes les lignes auront la même hauteur que le plus grand itemRenderer. Vous pouvez également envisager d’écrire votre propre itemRenderer pour chaque DataColumn.

Si vous souhaitez uniquement définir la hauteur des lignes en fonction du nombre d'éléments dans le fournisseur de données, vous pouvez simplement définir la propriété DataGrid.rowHeight comme ceci (en supposant que votre grille ait une hauteur fixe, disons 100%). :

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

(Je prends la parole ici parce que si vous vous retrouvez avec une valeur décimale arrondie, vous aurez besoin d'une barre de défilement.)

Le seul problème de cette approche, comme vous l'avez sans doute remarqué, est que l'élément item ne peut pas s'afficher correctement dans une ligne trop petite. Je suppose que vous pourriez résoudre ce problème en modifiant la police dans le moteur de rendu en fonction de sa hauteur.