Question

我有一种情况，我需要在另一个旁边显示几个1列DataGrids，并使用1个垂直滚动条控制它们。（结果看起来像1个DataGrid但由于我使用了一个变量行高，因此每个“列”在每一行上都可以有不同的行高。

为了达到所需的效果，我创建了几个网格并将它们堆叠在一个HBox中（我知道我应该使用spark但我想保留我的样式，而我的整个应用程序都在Halo中）。在HBox之外，我有一个VerticalScrollBar，我可以控制网格的滚动位置，因为我扩展了DataGrid并添加了一个垂直滚动条吸气器。

为简单起见，我已将代码剥离为基本要素：

<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:HBox id="viewPort" top="1" right="15" bottom="0" left="1" minWidth="0"
         horizontalScrollPolicy="auto" verticalScrollPolicy="off">
    </mx:HBox>
    <mx:VScrollBar id="vScrollBar" top="24" right="0" bottom="0" scroll="onScroll(event)" />
</mx:Canvas>

private function populateGrids() : void
{
    var item:Object;

    var maxScrollPosition:Number = 0;
    var dataGrid:CustomDataGrid;
    var dataProvider:Object = {'1':[11,12,13,14,15,16], '2':[21,22,23,24,25,26,27,28], '3':[31]};

    viewPort.removeAllChildren();
    for (item in dataProvider) {
        var col:DataGridColumn = new DataGridColumn();
        col.headerText = "Grid" + item;
        col.sortable = false;

        dataGrid = new CustomDataGrid();
        viewPort.addChild(dataGrid);

        dataGrid.minWidth = 200;
        dataGrid.percentHeight = 100;
        dataGrid.percentWidth = 100;
        dataGrid.headerHeight = 23;
        dataGrid.selectable = false;
        dataGrid.variableRowHeight = true;
        dataGrid.columns = [col];
        dataGrid.dataProvider = dataProvider[item];
    }

    viewPort.validateNow();
    for (item in dataProvider) {
        dataGrid = (viewPort.getChildAt(int(item)) as CustomDataGrid);
        maxScrollPosition = Math.max(maxScrollPosition, dataGrid.vScrollBar.maxScrollPosition);
    }

    vScrollBar.maxScrollPosition = maxScrollPosition;
    vScrollBar.scrollPosition = 0;

    // need to shut-off the vertical scroller only after the maxScrollPosition is calculated
    // otherwise, it doesn't calculate it ...
    for (item in dataProvider) {
        dataGrid = (viewPort.getChildAt(int(item)) as CustomDataGrid);
        dataGrid.verticalScrollPolicy = "off";
    }
}

private function onScroll(e:ScrollEvent) : void
{
    var grids:Array = viewPort.getChildren();
    for each (var grid:CustomDataGrid in grids) {
        grid.verticalScrollPosition = e.currentTarget.scrollPosition;
    }
}

虽然这确实显示了网格并滚动它们，但项目渲染器未正确重复使用（可能是由于verticalScrollPositon可能大于每个网格的实际最大滚动位置）。

我是从错误的位置开始的吗？有没有更好的方法来实现我想要的？如果没有，有没有办法将一个高于max的verticalScrollPosition分配给DataGrid，并让它显示一个没有数据的空白单元格？

我希望这足够连贯......

BTW：我正在使用Flex 4.5.1

滚动到flex datagrid中的最大垂直位置

0 个答案: