Flex: comment aligner à droite des cellules dans s: DataGrid?

Question

J'ai un s: DataGrid avec 3 colonnes. Je voudrais aligner à droite le texte dans les deux dernières colonnes, mais je n'arrive pas à trouver un moyen de le faire fonctionner. J'ai essayé de créer un moteur de rendu personnalisé et de définir textAlign à droite, mais cela ne fonctionne pas.

Voici mon renderer personnalisé:

<?xml version="1.0" encoding="utf-8"?> 

<fx:Script> 
    <![CDATA[ 
    ]]> 
</fx:Script> 

<s:Label id="lblData" top="9" left="7" text="{data.outgoingCount}" fontWeight="bold" textAlign="right"/> 

Je voudrais vraiment savoir comment aligner à droite cellules dans la grille. Merci à tous ceux qui peuvent aider.

Answer 1

Si vous avez seulement besoin d'afficher du texte, jetez un oeil à la classe DefaultGridItemRenderer. Si vous ne spécifiez pas de rendu d'élément, c'est ce que le Spark DataGrid utilisera.

DefaultGridItemRenderer a un style textAlign tout comme le Label fait.

Il n'est pas évident que votre moteur de rendu personnalisé ne fonctionne pas.

Answer 2

L'astuce avec l'alignement à droite à l'aide de itemRenderers consiste à s'assurer que la propriété itemRenderer utilise toute la largeur de la colonne contenant OU est ancrée sur le côté droit de la colonne de la grille. Dans le cas contraire, le texte de l'étiquette s'aligne sur un itemRenderer comme une étiquette qui n'est pas du côté droit de la grille. Par conséquent, assurez-vous que le composant effectuant le rendu de l'élément a une largeur = "100%" ou a juste quelque chose.

Voici un exemple qui s'ancre sur le côté droit de la colonne de la grille.

<s:DataGrid> 
    <s:columns> 
     <s:ArrayList> 
      <s:GridColumn dataField="Artist" width="100"/> 
      <s:GridColumn dataField="Price" width="100"> 
       <s:itemRenderer> 
        <fx:Component> 
         <s:GridItemRenderer> 
          <s:Label id="labelDisplay" textAlign="right" right="3" height="100%" verticalAlign="middle"/> 
         </s:GridItemRenderer> 
        </fx:Component> 
       </s:itemRenderer> 
      </s:GridColumn> 
      <s:GridColumn dataField="Album"/> 
     </s:ArrayList> 
    </s:columns> 
    <s:dataProvider> 
     <s:ArrayList> 
      <fx:Object> 
       <fx:Artist>Pavement</fx:Artist> 
       <fx:Price>11.99</fx:Price> 
       <fx:Album>Slanted and Enchanted</fx:Album> 
      </fx:Object> 
      <fx:Object> 
       <fx:Price>11.99</fx:Price> 
       <fx:Artist>Pavement</fx:Artist> 
       <fx:Album>Brighten the Corners</fx:Album> 
      </fx:Object> 
     </s:ArrayList> 
    </s:dataProvider> 
</s:DataGrid> 

Answer 3

Remerciements: Je dois beaucoup à de nombreux postes dans Stackoverflow pour ce Esp.Number formatting in java to use Lakh format instead of million format

Dans la nouvelle application AIR Flex 1 bonne innovation j'ai fait DROIT ALIGN + séparation par une virgule indienne

Cela se fait par élément personnalisé rendu; besoin de beaucoup d'efforts de recherche et le code Adapté de Java, mais Java, C# AS3 & si semblable est une partie de plaisir portage

En dehors de l'Inde personne aime lakhs et crores; d'autres heureux avec des millions de milliards MAIS nous, les Indiens, pensons aux lakhs et rêvons des crores; et trouver millions (10 lakh) thora confushingh

Enroute J'ai aussi fait RIGHT align un besoin commun

Flex Markup

<s:GridColumn id="dmbtr" headerText="Amt (INR)" dataField="dmbtr" > 
    <s:itemRenderer> 
    <fx:Component> 
     <s:GridItemRenderer> 
     <s:Label id="MyText" top="9" left="7" alpha="1" 
       text="{leftPad(data.dmbtr,10)}" 
       fontFamily="Lucida Console" textAlign="right"/> 
     </s:GridItemRenderer> 
    </fx:Component> 
    </s:itemRenderer> 
</s:GridColumn> 

AS3 Fonction

public function leftPad(inp:Number,size:int):String { 

    var lstr:String=Math.round(inp).toString(); 

// LAKHS CRORES Style indien

var pat3:RegExp = /(\d+)(\d{3})$/; 
    lstr = lstr.replace(pat3, "$1,$2"); 

    var pat2:RegExp = /(\d+)(\d{2},.+)/; 

    var pat1:RegExp = /\d{3,},.+/; 

    while(lstr.match(pat1)) 
    lstr = lstr.replace(pat2, "$1,$2"); 

// DROIT ALIGN partie

var strLen:int = lstr.length; 
    var padLen:int = size - strLen; 

    if (padLen <= 0) 
    return lstr; 

    var myspaces:String="     "; // 20 OK 

    return myspaces.substring(0,padLen)+lstr; 

}

L'astuce consiste à jambière gauche et utiliser Police largeur

Mon exigence est la roupie le plus proche

Si vous avez besoin décimales (paise pour INR) utiliser la méthode Fixe du numéro et changer pat3 comme
var pat3: RegExp = /(\d+)(\d{3}.*)$/;

La partie est aligné à droite après la virgule indienne

Answer 4

La meilleure et simple façon de le faire:

<s:DataGrid> 
... 
    <s:columns> 
     <s:ArrayList> 
      <s:GridColumn id="col3" dataField="price" headerText="Price"> 
       <s:itemRenderer> 
        <fx:Component> 
         <s:DefaultGridItemRenderer textAlign="center" /> 
        </fx:Component> 
       </s:itemRenderer> 
      </s:GridColumn> 
      ... 
     </s:ArrayList> 
    </s:columns> 
... 
</s:DataGrid> 

Source: https://forums.adobe.com/thread/863955?tstart=0