3

如果我在 Spark 数据网格中有 10 列，并且一些标题需要左对齐，一些标题右对齐，还有一些居中，那么完成此操作的最简单方法是什么？

假设需要自定义 headerRenderer，是否有任何简单的示例可以引导我完成它？

提前感谢您的任何评论。

4

2 回答 2

4

我能找到解决此问题的最简单方法是覆盖 spark DefaultGridHeaderRenderer 中的设置，如此链接中所述：

http://flexponential.com/2011/10/30/changeing-fontweight-of-spark-datagrid-headers/

更具体地说，我使用了以下自定义 headerRenderer，保存为文件：myRightHeaderRenderer.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" > 

<fx:Declarations>
    <s:Label id="labelDisplay" 
             verticalCenter="1" left="0" right="0" top="0" bottom="0"
             verticalAlign="middle"
             maxDisplayedLines="1"
             textAlign="right"
             fontWeight="bold"
             showTruncationTip="true" />
</fx:Declarations>

</s:DefaultGridHeaderRenderer>

此自定义标题渲染器右对齐标题文本。要使用它，只需将其添加到 Spark DataGrid 的一列或多列，如下所示：

...
<fx:Array>
    <s:GridColumn ... />
    <s:GridColumn headerRenderer="myRightHeaderRenderer" ...>
    <s:GridColumn ... />
    ...
</fx:Array>
...

我不知道该怎么做，但我确信可以通过将 textAlign 属性参数化为 、 或 来使其center更加left灵活right。

于 2012-05-03T16:27:21.493 回答
2

如果你看一下这篇博文，就会有相当多的源代码向你展示如何做到这一点。

但是，我认为博客的示例比您需要的要复杂得多。正如您所担心的那样，您将需要一个自定义的 headerRenderer，但您的代码应该非常简单。我只是简单地测试了这个，所以如果您有任何问题，请告诉我。

自定义标题渲染器

package
{
    import spark.skins.spark.DefaultGridHeaderRenderer;

    public class CustomGridHeader extends DefaultGridHeaderRenderer
    {
        public function CustomGridHeader()
        {
            super();
        }

        public function set headerTextAlign(value:String):void
        {
            labelDisplay.setStyle("textAlign",value);
            labelDisplay.styleChanged("textAlign");
        }
    }
}

列可用的变量...

[Bindable] private var leftFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var rightFactory:ClassFactory = new ClassFactory(CustomGridHeader);
[Bindable] private var centerFactory:ClassFactory = new ClassFactory(CustomGridHeader);

开initialize或preinitialize...

leftFactory.properties = {headerTextAlign: "left"};
rightFactory.properties = {headerTextAlign: "right"};
centerFactory.properties = {headerTextAlign: "center"};

对于每一列...

<s:GridColumn headerText="..." headerRenderer="{centerFactory}"/>
于 2012-05-02T20:22:03.570 回答