带图像的 Flex DataGrid - 图像未完全显示

Question

这是我的问题。我在 mx:DataGrid 列中有一个 mx:Image。如果我没有专门设置图片的宽高，当图片加载到网格中时，只会显示图片的一部分。

娱乐步骤：

1. 创建新的 Flex 项目（桌面）
2. 将项目配置为使用 Halo 主题。

3. 在各自的位置添加以下代码 *注意：确保为 windowedApplication 分配了 creationComplete 事件。还可能需要对任何导入语句等进行一些调整。抱歉。*

4. 这是我遇到的问题的一个简单示例。启动程序时，您将看到图像的一部分。当您点击重新绑定时，会出现完整的图像。

我试图让完整的图像显示在第一个绑定上，而不是第二个没有在 MXML 中设置尺寸。在没有发生某种用户交互的情况下，我无法通过 ActionScript 成功显示完整图像。

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

        protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
        {
            BindData();
        }

        private function BindData():void
        {
            var objOrderItem:Object = new Object();
            var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
            dgMain.dataProvider = new ArrayCollection(items.source);
        }   
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

<mx:VBox width="100%">
    <mx:Button label="Rebind" click="BindData()" />

    <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                 sortableColumns="false" rowCount="1">
        <mx:columns>
            <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">
                            <mx:Image source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                      width="60" maintainAspectRatio="true" />  
                        </mx:HBox>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>                
        </mx:columns>
    </mx:DataGrid>
    <mx:Label text="Text After Grid" />
</mx:VBox>

提前致谢！

Answer 1

问题已解决

大家好，我可以通过检查行高是否小于图像的高度来调整我的数据绑定到的 DataGrid 的行高来解决我的问题。我是这样做的：

我为图像的完整事件附加了一个侦听器。侦听器然后触发一个函数来检查 DataGrid 的 rowHeight 以查看它是否小于图像内容的高度。如果是，它会将 rowHeight 更新为图像内容的高度。

我只是没有成功使用此处建议的任何方法，以及我尝试使用的任何其他方法。

下面的完整代码示例：

请记住，这是一个快速且简单的修复实现。更精细的实现，我在项目中使用的 IE 也同样有效。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       creationComplete="windowedapplication1_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import controls.Photo.PhotoComponentForDataGrid;

            import flash.utils.setTimeout;

            import mx.collections.ArrayCollection;
            import mx.controls.Image;
            import mx.events.FlexEvent;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                BindData();
            }

            public function doImageDownloaded(imgLoaded:Image):void
            {   
                if (dgMain.rowHeight < imgLoaded.content.height)
                {
                    dgMain.rowHeight = imgLoaded.content.height;
                }
            }

            private function BindData():void
            {
                var objOrderItem:Object = new Object();
                objOrderItem.photoUrl = "http://c10008669.r69.cf2.rackcdn.com/9770258a-6ac1-4db5-956a-ada08beb7ae5/SK-000713/001/thumb_350/gallery.jpg";

                var items:ArrayCollection = new ArrayCollection(new Array(objOrderItem));
                dgMain.dataProvider = new ArrayCollection(items.source);
            }   
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <mx:VBox width="100%">
        <mx:HBox>
            <mx:Button label="Rebind" click="BindData()" />
        </mx:HBox>

        <!-- Items for Distribution Order -->
        <mx:DataGrid id="dgMain" resizableColumns="false" draggableColumns="false"
                     sortableColumns="false" rowCount="1" variableRowHeight="true">
            <mx:columns>
                <mx:DataGridColumn headerText="Thumb" sortable="false" width="60">
                    <mx:itemRenderer>
                        <fx:Component>
                            <mx:HBox horizontalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" width="100%">

                                <fx:Script>
                                    <![CDATA[
                                        protected function image1_completeHandler(event:Event):void
                                        {
                                            outerDocument.doImageDownloaded(imgThumb);
                                        }
                                    ]]>
                                </fx:Script>

                                <mx:Image id="imgThumb" source="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcTTuc9n_oweh-dv4LUljzh0Lxzn1AvZchODUoSAeGePaDwPqUuw"
                                          complete="image1_completeHandler(event)"/>    
                            </mx:HBox>
                        </fx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Text After Grid" />
    </mx:VBox>
</s:WindowedApplication>

Answer 2

尝试使用 setTimeout 函数，延迟时间可能为 100，而不是 callLater()。 在 callLater() 失败的某些情况下对我有用。

Answer 3

只是一个猜测，因为这对我之前使用 DataGrids 有效，您是否尝试过在数据网格上调用 invalidateList()。刚刚检查了该方法设置了 itemsSizeChanged 标志，然后在它所说的标志的定义处调用 invalidateDisplayList：

/**
 *  A flag that indicates that the size of the renderers may have changed.
 *  The component usually responds by re-applying the data items to all of
 *  the renderers on the next <code>updateDisplayList()</code> call.
 *  There is an assumption that re-applying the items will invalidate the
 *  item renderers and cause them to re-measure.
 */