2

如前所述，我试图在 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();
}

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

我对此没有想法。还有谁？

4

2 回答 2

2

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

更新：只有当我手动拉伸 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>
于 2012-08-28T11:42:38.407 回答
0

如果有人对如何使用动态创建的列感兴趣，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();
于 2012-08-29T08:14:52.797 回答