如何在两个Flex AdvancedDataGrids中使列宽可绑定?

时间:2009-04-03 14:25:04

标签: flex actionscript-3 mxml advanceddatagrid

在这里忍受我。我有一个奇怪的设置来完成我需要的东西。我基本上有一个AdvancedDataGrid,它显示WebService返回的数据。数据采用XML格式:

<children label="parent 1" value="3100">
    <children label="child 1" value="1100">
        <children label="grandchild 1" value="200">
        </children>
        <children label="grandchild 2" value="300">
        </children>
        <children label="grandchild 3" value="600">
        </children>
    </children>
    <children label="child 2" value="2000">
        <children label="grandchild 4" value="1200">
        </children>
        <children label="grandchild 5" value="800">
        </children>
    </children>
</children>
<children label="parent 2" value="1000">
    <children label="child 3" value="1000">
        <children label="grandchild 6" value="300">
        </children>
        <children label="grandchild 7" value="700">
        </children>
    </children>
</children>

我将XML转换为WebService结果处理程序中的HierarchicalData对象。我还动态构建AdvancedDataGrid的列,因为它用于根据用户输入显示不同的列。但是,我还需要在AdvancedDataGrid的底部显示总计“行”。我无法弄清楚如何将我的XMLListCollection转换为GroupingCollection,从而以这种方式创建一个总计行,因此,我实际上计算了WebService中的总数并将其作为XML中的节点返回:

<totals value="4100" />

我使用这个“总计”数据填充第二个AdvancedDataGrid,没有直接位于第一个ADG下方的标题,因此它“显示”为第一个ADG的“最后一行”。两个ADG都使用相同的Bindable列数组:

<mx:AdvancedDataGrid id="reportADG" dataProvider="{__model.reportData}"
    columns="{__model.adgDrillColumns}" width="100%" height="100%" />

<mx:AdvancedDataGrid id="reportTotalsADG" 
    dataProvider="{__model.reportTotalsData}" 
    folderOpenIcon="{null}" folderClosedIcon="{null}" 
    disclosureClosedIcon="{null}" disclosureOpenIcon="{null}" 
    defaultLeafIcon="{null}" showHeaders="false" 
    selectable="false" rowCount="1" 
    columns="{__model.adgColumns}" width="100%" />

但是,如果在第一个ADG中调整列的大小,我找不到让第二个ADG中的列调整大小的方法。我该怎么办?

1 个答案:

答案 0 :(得分:1)

您可以使用摘要行方法,也可以创建自定义组件以分别显示总计。在我的例子中,我必须创建一个自定义组件,它获取所有ADG列,确定它们的宽度,绘制垂直线/分隔符,然后汇总所有行并显示标签。这很好,因为它的使用方式如下:

<components:DataGridSummaryFooter id="summaryView"
     height="6%" width="100%"
     totalsColumns="{[impressionsCol, estimatedSpendingCol]}"
     dataSource="{dataViewSource}" 
/>

......剩下的就是魔术!

仅供参考,我必须创建一个单独的组件而不使用摘要行的原因是由于此应用程序的设计要求。事实上,我希望它总是以这种方式完成,因为使用摘要行,你必须一直滚动到网格底部以查看摘要,这不是非常好的用户体验。

我希望这可以帮助某些人在某些方面获得某些东西! :)

干杯