Flex: 如何在 s:DataGrid 中右对齐单元格？

Question

我有一个含有3列的s:DataGrid。我想将最后两列中的文本右对齐，但无法找到方法使其生效。我尝试创建了一个自定义渲染器并将textAlign设置为right，但它不起作用。

这是我的自定义渲染器：

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

我想知道如何在网格中将单元格右对齐。谢谢任何能提供帮助的人。

- fred basset

Answer 1

如果您只需要显示文本，请查看DefaultGridItemRenderer类。如果您不指定项目渲染器，则Spark DataGrid将使用它。 DefaultGridItemRenderer具有与Label相同的textAlign样式。

您自定义的渲染器为什么无法正常工作并不明显。

- Sunil D.

Answer 2

使用itemRenderers进行右对齐的诀窍是确保itemRenderer要么使用包含列的全宽度，要么被锚定到网格列的右侧。否则，标签中的文本会像不在网格右侧的标签一样对齐到itemRenderer上。

因此，请确保执行item rendering的组件具有width="100%"或right=something。

以下是一个示例，它将锚定到网格列的右侧。

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

- Ross Attrill

Answer 3

最好和简单的方法是：

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

来源：https://forums.adobe.com/thread/863955?tstart=0

- Destroyica

Answer 4

致谢：在这些方面我要归功于STACKOVERFLOW中的许多帖子，特别是在Java中使用Lakh格式而不是百万格式进行数字格式化。

在新的Flex AIR应用程序中，我做了一个很好的创新右对齐+印度逗号分隔符

这是通过自定义项渲染完成的；需要大量的搜索和代码工作。从Java中改编而来，但Java、C#和AS3是如此相似，移植起来非常容易。

除了印度之外，没有人喜欢"lakhs"和"crores"；其他人都喜欢"million"和"billion"。但我们印度人认为lakhs和crores，比较舒服，觉得"million"（一百万）有点困惑。

在此过程中，我还实现了右对齐，这是一个非常常见的需求。 Flex标记：

<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函数

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

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

// LAKHS CRORES 印度风格

  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");

// 右对齐部分

  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;

}

技巧在于左侧填充并使用固定宽度字体

我的要求是最接近卢比

如果需要小数（INR的派斯），请使用Number的toFixed方法，并将pat3更改为
var pat3：RegExp = /（\d+）（\d {3}。*）$ /;

正确对齐部分位于印度逗号之后

- Jayanta