Flex DataGrid帶圖像 - 圖像沒有完全顯示

Question

這是我的問題。我在mx：DataGrid列中有一個mx：Image。如果我沒有專門設置圖像的寬度和高度，當圖像加載到網格中時，只會顯示圖像的一部分。

娛樂步驟：

1. 創建新的Flex項目（桌面）
2. 配置項目中使用Halo主題。

3. 將下面的代碼添加到它們各自的位置 *注意：確保爲窗口應用程序分配了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

只是一個猜測，因爲這對我以前用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. 
*/ 

Answer 3

嘗試使用setTimeout函數有一個小的延遲可能有100人，而不是使用callLater（）。 在某些情況下，當callLater（）失敗時適用於我。