actionscript-3 - Flex DataGridw/画像-画像が完全に表示されない

Question

これが私の問題です。mx：DataGrid列内にmx：Imageがあります。画像の幅と高さを特に設定しないと、画像がグリッドに読み込まれるときに、画像の一部のみが表示されます。

レクリエーションの手順：

新しいFlexプロジェクトの作成（デスクトップ）
Haloテーマを使用するようにプロジェクトを構成します。
それぞれの場所に次のコードを追加します*注：windowedApplicationのcreationCompleteイベントが割り当てられていることを確認してください。また、インポートステートメントなどの調整が必要になる場合があります。申し訳ありません。*
これは私が抱えている問題の簡単な例です。プログラムを起動すると、画像の一部が表示されます。[再バインド]をクリックすると、画像全体が表示されます。

MXMLでサイズを設定せずに、2番目のバインドではなく、最初のバインドで完全な画像を表示しようとしています。なんらかのユーザー操作を行わずに、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>

前もって感謝します！

score 0 · Accepted Answer

これは以前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.
 */

score 0 · Accepted Answer

callLater（）の代わりに、おそらく100の小さな遅延でsetTimeout関数を使用してみてください。callLater（）が失敗した場合に機能する場合があります。

score 0 · Accepted Answer

問題が解決しました

みなさん、こんにちは。データがバインドされている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>

actionscript-3 - Flex DataGridw/画像-画像が完全に表示されない

3 に答える 3

Related

Reference