Flex 4.6 绑定到 Spark GridColumn 宽度答案

【问题标题】：Flex 4.6 binding to Spark GridColumn widthFlex 4.6 绑定到 Spark GridColumn 宽度
【发布时间】：2013-02-24 16:22:33
【问题描述】：

我知道 Flex 漏洞百出，需要大量的技巧才能使其正常工作，但我认为我正走在正确的道路上。我将描述我正在尝试实施的问题和解决方案，希望您能指出我正确的道路。

我要做的是将 Spark DataGrid 列的宽度绑定到 Spark 标签的宽度，这是第一个洞：GridColumn 有一个绑定属性“width”，但在对象创建后它还没有准备好完成并且仅在用户交互后发布。所以我想出了第一个技巧：从 DataGrid 本身提取列宽的函数，它绑定到在创建列或更改列大小时触发的事件，并且它可以工作：

[Bindable(event="creationComplete")]
[Bindable(event="columnStretch")]
[Bindable(event="propertyChange")]
public function columnWidth(grid:DataGrid, column:GridColumn):int {
    if(isNaN(column.width)){
        if(column.grid){
            return column.grid.getColumnWidth(grid.columns.getItemIndex(column));
        }
    }
    return column.width;
}

它可以在创建时检索宽度，但是当我用光标设置列的宽度时它不起作用，因为任何可绑定属性都有效，所以事情是这样的：如果我设置像这样的标签：用户交互后宽度会改变，但网格创建完成后不会改变。如果我在网格完成后设置宽度并更改宽度但它不会对用户交互做出反应...

有什么帮助吗？

【问题讨论】：

标签： actionscript-3 apache-flex data-binding flex4.5

【解决方案1】：

我正在使用mx:AdvancedDataGrid。我只是为数据网格列分配一个 ID。我根据要求将列宽属性与inputText 绑定。它对我有用...

例如：

<s:textInput width="{myDatagridColumnID.width - 10}" />

我正在使用 Flash Builder 4.6。

【讨论】：

【解决方案2】：

看起来我不久前遇到了同样的问题。并修复它：以下方法对我来说效果很好。假设您有一个根据列宽调整标签大小的函数：

protected function layoutTextInputs():void {
    var numCols:int = dataGrid.columns.length;
    var w:Number = 0;

    for (var i:int=1; i<numCols; i++) {
        var header:Rectangle = dataGrid.columnHeaderGroup.getHeaderBounds(i);
        var textInput:IVisualElement = textInputs.getElementAt(i - 1);

        textInput.left = header.x;
        textInput.width = header.width;
    }
}

在此示例中，textInputs 是一个 Group，每列都包含一个 TextInput，它正好位于该列的上方并且宽度相同。

现在您想在每次用户调整列大小时调用此函数，因此您可以这样做：

dataGrid.columnHeaderGroup.addEventListener(
    GridEvent.SEPARATOR_MOUSE_DRAG, onHeaderResize);
dataGrid.columnHeaderGroup.addEventListener(
    GridEvent.SEPARATOR_MOUSE_UP, onHeaderResize);

private function onHeaderResize(event:GridEvent):void {
    layoutTextInputs();
}

但不幸的是，这不会在初始化时执行该方法，也不会在以任何其他方式改变列宽的方式重绘屏幕时，而不是通过用户交互。幸运的是，这很容易解决：

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void 
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    layoutTextInputs();
}

编辑：关于 Flex 中“漏洞”的注释。

GridColumn 不是可视组件。它是一个表示模型，指示网格布局如何呈现其（实际）列。因此，您必须将其 width 属性解释为这样的指令，而不是列宽的实际值。
默认情况下，列的宽度取决于其内容和可用空间。 width 属性指示网格布局改为使用自定义数量的像素。

【讨论】：