GridItemRenderer 中的 Flex DataGrid

Question

我有一些分层数据，我想在 Flex Spark DataGrid 中显示，看起来像这样：

|------|---------------------------|
| row1 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|  in  | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans    |
|      | over multiple columns here|
|----------------------------------|
| row2 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
|  in  | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| outer|---------------------------|
| grid | a component that spans    |
|      | over multiple columns here|
|----------------------------------|

我想要做的是使用一个自定义的 GridItemRenderer，它包含一个内部 DataGrid。基本概念如下所示：

<s:DataGrid dataProvider="{outerDataProvider}" width="100%" height="100%" variableRowHeight="true">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="name">
                <s:itemRenderer>
                    <fx:Component>
                        <s:DefaultGridItemRenderer />
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
            <s:GridColumn>
                <s:itemRenderer>
                    <fx:Component>
                        <s:GridItemRenderer>
                            <s:states>
                                <s:State name="normal" />
                                <s:State name="toggled" />
                            </s:states>
                            <s:layout>
                                <s:VerticalLayout />
                            </s:layout>
                            <s:HGroup>
                                <s:DataGrid dataProvider="{data.innerDataProvider}"  columns="{outerDocument.myDynamicGeneratedColumns}">
                                </s:DataGrid>
                                <s:Group>
                                    <s:ToggleButton label="Toggle" />
                                </s:Group>
                            </s:HGroup>

                            <MyComponent width="100%" height="50" includeIn="toggled" />
                        </s:GridItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:GridColumn>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

我在添加内部 DataGrid 时遇到了一些严重的性能问题。垂直滚动非常慢。

我一直在尝试了解要优化什么，但我不确定从哪里开始。内部 DataGrid 需要具有动态数量的列，我想这是需要做一些事情的部分之一。

这样做是完全错误的吗？我可以使用 DataGrid 之外的其他组件作为内部 Grid 结构并获得更好的性能吗？

网格基本上是一个包含图像的网格，具体取决于每行内的值。

有任何关于 DataGrid 技巧的建议或链接吗？

Answer 1

如何为内部网格使用带有 TileLayout 的列表。这肯定会表现得更好：

    <s:List>
        <s:layout>
            <s:TileLayout/>
        </s:layout>
    </s:List>