AdvancedDataGrid 水平/垂直滚动条问题。 （弹性）

Question

所以，我有一个 AdvancedDataGrid 需要位于 Canvas 内。我的问题是，当你做这样的事情时，你会得到两组滚动条。此外，当您从右向左滚动时，AdvancedDataGrid 的水平滚动条会改变大小，并且不会让您一直滚动到右侧，这看起来很奇怪。

我已经关闭了 AdvancedDataGrid 的水平滚动功能，只让 Canvas 处理它。然而，当我这样做时，列不允许调整自身大小。啊。

我当前的“最佳”解决方案是让 AdvancedDataGrid 处理垂直滚动，让 Canvas 处理水平滚动，但这看起来很疯狂，更不用说我遇到了上面提到的问题，我无法再调整列的大小。

非常感谢任何帮助！ 谢谢！

Answer 1

AdvancedDataGrid 的水平滚动有些特殊，因为它根据可见列的宽度调整其水平滚动滑块的大小。实际上，您可以将拇指拖动到末尾，但这可能需要尝试几次。 （我知道，我知道...）

请记住，在 AdvancedDataGrid 中，在视口之外实际上没有渲染任何内容，因此任何大小调整都只是一个有根据的（好吧，有点有根据的）猜测。 Adobe 这样做是为了避免巨大的网格陷入困境（想象一下每次调整窗口大小时在 15,000 个单元格的 itemRenderer 上运行测量方法）。

我的建议是关闭 Canvas 中的垂直和水平滚动策略，并允许在 ADG 中处理滚动。它很丑陋，但它胜过其他选择。无论如何，ADG 都是一个笨重、脾气暴躁的装置，这可能就是 Adob​​e 将其开源的原因。我已经发誓很多次我再也不会使用它了。我只能在下次需要它的功能时才遵守这个誓言。大约每周一次。

Answer 2

AdvancedDataGrid 是画布中唯一的东西吗？

我会将 AdvancedDataGrid 的大小调整为完整的高度和宽度，并让 Canvas 处理滚动。

在画布中，重写 updateDisplayList 方法并执行如下操作：

protected function updateDisplayList(unscaledWidth: Number, unscaledHeight: Number):void{
 super.updateDisplayList, unscaledHeight);
 this.myAdvancedDataGrid.setActualSize(this.myAdvancedDataGrid.measuredHeight, this.myAdvancedDataGrid.measuredWidth );
}

这样 AdvancedDataGrid 应该没有滚动条。但是，如果它延伸到很下方或太右边，滚动条将出现在画布中。

阅读Flex 坐标系可能会对您有所帮助。 AdvancedDataGrid 是您的“内容”，而 Canvas 是您的本地内容。

---

我正在添加完整的运行代码示例来演示我的建议。

这是里面有 AdvancedDataGrid 的画布组件： com.flextras.stackOverflow.CanvasWithGrid

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                this.myADG.setActualSize(this.myADG.measuredWidth, this.myADG.measuredWidth );
            }

            [Bindable]
            private var dpFlat:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                {Region:"Southwest", Territory:"Arizona", 
                    Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000},  
                {Region:"Southwest", Territory:"Central California", 
                    Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000},  
                {Region:"Southwest", Territory:"Nevada", 
                    Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000},  
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                {Region:"Southwest", Territory:"Northern California", 
                    Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000},  
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                {Region:"Southwest", Territory:"Southern California", 
                    Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}
            ]);

        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG" 

                         initialize="gc.refresh();"> <!--  width="100%" height="100%"  -->       
        <mx:dataProvider>
            <mx:GroupingCollection id="gc" source="{dpFlat}">
                <mx:grouping>
                    <mx:Grouping>
                        <mx:GroupingField name="Region"/>
                        <mx:GroupingField name="Territory"/>
                    </mx:Grouping>
                </mx:grouping>
            </mx:GroupingCollection>
        </mx:dataProvider>        

        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                       headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>

</mx:Canvas>

这是主应用程序文件：

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:stackOverflow="com.flextras.stackOverflow.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <stackOverflow:CanvasWithGrid width="200" height="200" />


</s:Application>