Question

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

（编辑：我忘了提及上下文的一个重要部分：在动作脚本中动态添加列。这显然会改变行为。）

我尝试过使用自定义的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中的height="100%"中删除mx:Text属性时，它对我有用。

UPDATE ：当我手动拉伸AdvancedDataGrid组件时，它只能这样工作。我将研究如何使其无条件地工作。

当Text组件的高度设置为100％时，它被限制为其父HBox的高度。因此，当一个单词被包装并移动到下一行时，它就不可见了，因为Text组件的高度不允许它可见。

如果删除此约束，Text组件的高度将根据其内容动态确定，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>

Answer 2

如果有人对如何使用动态创建的列感兴趣，那么渲染器的Hunternif代码和创建列的一些添加代码的组合对我有用：

列需要具有固定宽度，并且需要无效以通知AdvancedDataGrid它需要重新渲染：

var cols:Array = [];

for each (...) {
    var column:AdvancedDataGridColumn = new AdvancedDataGridColumn();
    ...

    // Fix the width of created columns
    column.width = 150;

    cols.push(column);
}

grid.columns = cols;

// Invalidate columns so that sizes are recalculated
grid.mx_internal::columnsInvalid = true;

// Take changes into account
grid.validateNow();

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

2 个答案: