플렉스 DataGrid 승/이미지 - 이미지가 완전히 표시되지 않습니다

Question

여기 내 문제가 있습니다. mx : Image를 mx : DataGrid 열 내에 있습니다. 특별히 이미지의 너비와 높이를 설정하지 않은 경우 이미지가 그리드로로드되면 이미지의 일부만 표시됩니다.

레크리에이션 단계 :

1. 새로운 플렉스 프로젝트 (데스크탑) Halo 테마를 사용하는
2. 구성 프로젝트를 만듭니다.

3. 해당 위치에 다음 코드를 추가하십시오. * 주 : windowedApplication에 대한 creationComplete 이벤트가 할당되었는지 확인하십시오. 또한 수입 명세서 등에 대해 약간의 조정이 필요할 수 있습니다. 죄송합니다. *

4. 이것은 내가 가지고있는 문제의 간단한 예입니다. 프로그램을 실행하면 이미지의 일부가 표시됩니다. Rebind을 클릭하면 전체 이미지가 나타납니다. 나는 전체 이미지를 얻으려고

는는 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의 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()를 호출하려고 했습니까? 그냥 그 방법은 그것이 말하는 플래그의 정의에로 invalidateDisplayList itemsSizeChanged 플래그를 설정하고 호출 확인 :

/** 
* 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

대신 callLater의() 약간의 지연 어쩌면 100의 setTimeout 기능을 사용하십시오. callLater()가 실패하는 경우 작동합니다.