apache-flex - 如何将图标添加到 AdvancedDataGrid 列标题并保留文本的自动换行功能

Question

如上所述，我正在尝试获取由 Flex AdvancedDataGrid 中的图标和可换行文本组成的列标题。

(编辑:我忘记提及上下文的一个重要部分:在 ActionScript 中动态添加列。这显然改变了行为。)

我尝试使用自定义 mxml headerRenderer，如下所示:

<mx:headerRenderer>
    <fx:Component>
        <mx:HBox width="100%"
                 height="100%"
                 verticalAlign="middle">
            <mx:Image source="<image_url>"
                      width="10%"
                      height="100%"/>
            <mx:Text text="{data.headerText}"
                     width="90%"
                     height="100%"/>
        </mx:HBox>
    </fx:Component>
</mx:headerRenderer>

但由于某种原因，此处的文本被截断而不是换行(它在渲染器之外工作)。

我还尝试创建 AdvancedDataGridHeaderRenderer 的子类并重写 createChildren 以添加图标:

override protected function createChildren():void
{
    var icon:Image = new Image();
    icon.source = <image_url>;
    icon.width = 16;
    icon.height = 16;
    addChild(icon);

    super.createChildren();
}

但是随后，图标和文本会叠加。

我对此没有想法。还有其他人吗？

Answer 1

当我从 headerRenderer 中的 mx:Text 中删除 height="100%" 属性时，它对我有用。

更新:只有当我手动拉伸(stretch) AdvancedDataGrid 组件时，它才会像这样工作。我将研究如何使其无条件工作。

当 Text 组件的高度设置为 100% 时，它被限制为其父级 HBox 的高度。因此，当一个单词被换行并移动到下一行时，它是不可见的，因为文本组件的高度不允许它可见。

如果删除此约束，文本组件的高度将根据其内容动态确定，headerRenderer 的高度也是如此。还要将 minHeight 添加到您的文本中，以便在加载时可见。

这是代码(我还删除了滚动条，因为它们在调整大小期间显示):

<mx:headerRenderer>
    <fx:Component>
        <mx:HBox width="100%"
                 height="100%"
                 verticalAlign="middle"
                 horizontalScrollPolicy="off"
                 verticalScrollPolicy="off">
            <mx:Image source="<image_url>"
                      width="10%"
                      height="100%"/>
            <mx:Text text="{data.headerText}"
                     width="90%"
                     minHeight="20"/>
        </mx:HBox>
    </fx:Component>
</mx:headerRenderer>