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

Question

J'ai des rangées de données de texte qui peuvent varier entre 0 et 100, et toutes doivent être visibles sur l'écran en même temps. Le comportement par défaut est correct pour la grille jusqu'aux lignes * rowHeight> gridHeight.

Fondamentalement, j'ai besoin d'un crochet dans la hauteur de l'objet, ou la hauteur de la ligne pour le calculer en fonction de la hauteur de la grille. J'ai mis à zéro paddingTop et paddingBottom, mais il y a toujours une quantité considérable d'espace blanc 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 le itemRender pour la cellule plus grande que la cellule, si je mets la hauteur de ligne à quelque chose comme 10.

Answer 1

Merci beaucoup, ça m'a beaucoup aidé. C'est ma dernière composante de la grille. Ce n'est pas vraiment autonome à cause de quelques appels, mais si ça aide quelqu'un d'autre à faire travailler le leur, c'est bien!

<?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 pourriez Vous voulez voir la propriété DataGrid.variableRowHeight comme étant définie sur false (par défaut) toutes les lignes auront la même hauteur que le plus grand itemRenderer. Vous pouvez également écrire votre propre itemRenderer pour chaque DataColumn. Si tout ce que vous voulez vraiment faire est de définir la hauteur de ligne en fonction du nombre d'éléments dans le dataProvider, vous pouvez simplement définir la propriété DataGrid.rowHeight comme ceci (en supposant que votre grille a une hauteur fixe, disons 100%):

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

(que je prends la parole ici parce que si vous vous retrouvez avec une valeur fractionnelle qui complète, vous aurez besoin d'une barre de défilement)

le seul problème avec cette approche, comme Je pense que vous avez remarqué, c'est que le itemRenderer peut ne pas s'afficher correctement dans une rangée trop petite. Je suppose que vous pourriez résoudre cela en changeant la police dans le moteur de rendu en fonction de sa hauteur.