在flex數據網格中使用圖像項呈現

Question

我試圖將圖像添加到在flex中動態呈現的datagrid項目中。

這裏是我的DataGrid代碼

「STR」在getImagePath函數的值是正確的。

<?xml version="1.0" encoding="utf-8"?> 
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml" 
      doubleClickEnabled="true"> 
    <mx:Script> 
     <![CDATA[ 
      private function userLabelFunction(item:Object, column:DataGridColumn):String 
      { 
       return item.user.username; 
      } 

      private function getImagePath(item:Object, column:DataGridColumn):String 
      { 
       var str:String=item.track["artwork-url"] 

       if (str == "") 
       { 
        str=item.user["avatar-url"]; 
       } 

       return str; 

      } 
     ]]> 
    </mx:Script> 
    <mx:columns> 
     <mx:DataGridColumn dataField="artwork-url" 
          headerText="Art" 
          itemRenderer="components.content.contents.datagrids.ImageRenderer" 
          labelFunction="getImagePath"/> 
     <mx:DataGridColumn dataField="title" 
          headerText="Title" 
          minWidth="100"/> 
     <mx:DataGridColumn dataField="user" 
          headerText="User" 
          labelFunction="userLabelFunction"/> 
     <mx:DataGridColumn dataField="bpm" 
          headerText="BPM"/> 
    </mx:columns> 
</mx:DataGrid> 

我不能設法獲取圖像的URL值進入我的項目渲染

我試圖重寫組數據屬性，像這樣

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" 
     height="60" 
     verticalAlign="top" 
     creationComplete="init()"> 
    <mx:Script> 
     <![CDATA[ 
      import components.content.contents.containers.ContentContainerSoundCloud; 
      import mx.core.Application; 
      import mx.controls.dataGridClasses.DataGridColumn; 
      import com.adobe.viewsource.ViewSource; 

      [Bindable] 
      public var imgPath:String; 

      private function init():void 
      { 

      } 
      override public function set data(value:Object):void 
        { 
         super.data = value.track["artwork-url"]; 

         imgPath =super.data.valueOf() 
         trace(imgPath) 

        } 
     ]]> 
    </mx:Script> 

    <mx:Image source="{imgPath}" id="rowimage"/> 
</mx:HBox> 

但這樣做跟蹤輸出外觀像這樣

<artwork-url> 
    <mx_internal_uid>7C98E149-1984-584C-7600-AD8940BF2A9C</mx_internal_uid> 
</artwork-url> 

我期待設置數據中的「值」屬性來接收s特林我從get imagePathFunction發送它，但它實際上返回我的整個XMLList。

我在做什麼錯？

Answer 1

根據您的跟蹤輸出，它看起來像是從dataProvider中檢索錯誤值以設置爲源。沒有看到你的實際數據，很難知道確切的問題可能是什麼。

這就是說，我會重新工作你的itemRenderer了一下。首先，您不需要在HBox中放置單個圖像。只需使用圖像。另外，您不需要在渲染器中指定高度，DataGrid應該處理這種位置。

我也刪除了creationComplete監聽器，因爲沒有代碼在裏面。而不是使用綁定，我只需在數據集方法中的組件上設置soruce屬性即可。我還將super.data設置爲該值，而不是已處理的值;我在設置數值源時進行了處理。更新後的代碼是這樣的：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" 
     > 
    <mx:Script> 
     <![CDATA[ 
      import components.content.contents.containers.ContentContainerSoundCloud; 
      import mx.core.Application; 
      import mx.controls.dataGridClasses.DataGridColumn; 
      import com.adobe.viewsource.ViewSource; 

      [Bindable] 
      public var imgPath:String; 

      override public function set data(value:Object):void 
        { 
         super.data = value; 

         this.source =value.track["artwork-url"]; 
         trace(imgPath) 

        } 
     ]]> 
    </mx:Script> 

</mx:Image> 

我在itemRenderer的首選方法是聽dataChange事件，但是這僅僅是個人喜好。重寫數據集方法沒有任何問題。