Flex:如何正确对齐s:DataGrid中的单元格?

时间:2012-07-08 19:16:36

标签: flex datagrid flash-builder flex4.5

我有一个带有3列的s:DataGrid。我想在最后两列中右对齐文本,但找不到让它工作的方法。我已经尝试创建自定义渲染器并将textAlign设置为右边,但它不起作用。

这是我的自定义渲染器:

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

我真的很想知道如何正确对齐网格中的单元格。感谢任何可以提供帮助的人。

4 个答案:

答案 0 :(得分:2)

如果您只需要显示文字,请查看DefaultGridItemRenderer课程。如果您没有指定项呈示器,那么这就是Spark DataGrid将使用的内容。

DefaultGridItemRenderer具有textAlign样式,就像Label一样。

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

答案 1 :(得分:1)

使用itemRenderers进行右对齐的技巧是确保itemRenderer使用包含列的整个宽度或者锚定到网格列的右侧。否则,标签右侧的文本与itemRenderer对齐,就像不在网格右侧的标签一样。

因此,请确保执行项目渲染的组件具有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>

答案 2 :(得分:0)

致谢:对于STACKOVERFLOW,我欠了很多帖子 ESP。 Number formatting in java to use Lakh format instead of million format

在新的Flex AIR应用程序中,我做了很好的创新 RIGHT ALIGN +印度逗号分离

这是通过自定义项目渲染完成的;需要大量的搜索和代码工作 改编自Java但Java,C#&amp; AS3如此相似,这是一个轻巧的移植

在印度之外,没有人喜欢十万卢比和十亿人;其他人满意千万 但是我们印第安人认为十字架和梦想有关;并找到百万(10万)thora confushingh

Enroute我也做了一个非常普遍的需要

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的paise),请使用Number的固定方法 并将pat3更改为
var pat3:RegExp = /(\ d +)(\ d {3}。*)$ /;

右对齐部分是印度逗号之后

答案 3 :(得分:0)

最好和最简单的方法:

<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