Flex DataGrid Itemrenderer圖像不能顯示

Question

所有，我有一個Datagrid與一個ItemRenderer分配給一個貨幣列（字符串）的列。渲染器意味着顯示貨幣的標誌，例如;對於美元，它應該顯示USD標誌圖像等。此時該列出現空白而沒有圖像。我有以下渲染器（它擴展了UIComponent）。我在commitProperties（）方法中動態加載圖像。目前我已經對美元形象進行了硬編碼，以使其起作用 - 但沒有運氣。任何幫助將大大appreaciated。

public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer 

    { 

    private var _loader:Loader; 
    private var _img:Image; 

    public function CenteredEmbedImage() 
    { 
     super(); 

    } 


    private var _data:Object; 

    [Bindable("dataChange")] 
    [Inspectable(environment="none")] 


    public function get data():Object 
    { 
     return _data; 
    } 

    public function set data(value:Object):void 
    { 
     var newText:*; 

     _data = value; 

    invalidateProperties(); 

     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); 
    } 

    private var _listData:BaseListData; 

    [Bindable("dataChange")] 
    [Inspectable(environment="none")] 

    public function get listData():BaseListData 
    { 
     return _listData; 
    } 


    public function set listData(value:BaseListData):void 
    { 
     _listData = value; 
    } 


    override protected function commitProperties():void 
    { 
     super.commitProperties(); 

     if (listData) 
     { 
      // remove the old child if we have one 
      if (_img) 
       removeChild(_img); 

      _img= new Image(); 

      //source code of the second way 
      _loader = new Loader(); 
      //notice: NOT _loader.addEventListener,is _loader.contentLoaderInfo.addEventListener 
      _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.source = e.currentTarget.content;}); 
      _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

      addChild(_img); 
     } 
    } 

    override protected function measure():void 
    { 
     super.measure(); 

     if (_img) 
     { 
      measuredHeight = _img.height; 
      measuredWidth = _img.width; 
     } 
    } 

    override protected function updateDisplayList(w:Number, h:Number):void 
    { 
     super.updateDisplayList(w, h); 

     if (_img) 
     { 
      _img.x = (w - _img.width)/2; 
     } 
    } 

} 

} 

Answer 1

看起來你正在做很多錯誤的事情。首先，不要每次都刪除並重新創建圖像，只需在createChildren（）方法中創建一次，然後更改源屬性即可。其次，我沒有看到你在任何地方設置圖像的高度或寬度。一定要這樣做，通常在updateDisplayList中。第三，在測量方法中，我建議將measuredHeight和measuredWidth設置爲圖像的measuredHeight和measuredWidth。我通常使用getExplicitOrMeasuredHeight和getExplicitOrMeasuredWidth方法。

第四你爲什麼使用URL Loader？只需使用圖片標籤並設置來源。

這不是測試的代碼，但我可能會改變你的itemRenderer是這樣的：

 public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer 

    { 

// private var _loader:Loader; 
    // the image definition here didn't have a access modifier, I added private 
    private var _img:Image; 

    public function CenteredEmbedImage() 
    { 
     super(); 

    } 


    private var _data:Object; 

    [Bindable("dataChange")] 
    [Inspectable(environment="none")] 


    public function get data():Object 
    { 
     return _data; 
    } 

    public function set data(value:Object):void 
    { 
// what is newText for? 
//  var newText:*; 

     _data = value; 
// set the source here, although you could also set this in commitProperties if 
// you wanted to add a change variable 
     _img.source = "assets/images/flags/usd.gif" 

    invalidateProperties(); 

     dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE)); 
    } 

    private var _listData:BaseListData; 

    [Bindable("dataChange")] 
    [Inspectable(environment="none")] 

    public function get listData():BaseListData 
    { 
     return _listData; 
    } 


    public function set listData(value:BaseListData):void 
    { 
     _listData = value; 
    } 


// I added this method and moved the image creation here 
    override protected function createChildren():void{ 
    super.createChildren() 
    _img= new Image(); 
    addChild(_img); 

    } 

    override protected function commitProperties():void 
    { 
     super.commitProperties(); 

     if (listData) 
     { 
      // remove the old child if we have one 
// removed this segment 
//   if (_img) 
//    removeChild(_img); 

// removed this loader code too 
      //source code of the second way 
//   _loader = new Loader(); 
      //notice: NOT _loader.addEventListener,is // 

// _loader.contentLoaderInfo.addEventListener 
      // _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.sourc// e = e.currentTarget.content;}); 
//   _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

     } 
    } 

    override protected function measure():void 
    { 
     super.measure(); 

     if (_img) 
     { 
// instead of using heigh and width here, I used the getExplicitorMEasured methods 
      measuredHeight = _img.getExplicitOrMeasuredHeight(); 
      measuredWidth = _img.getExplicitOrMeasuredWidth()  } 
    } 

    override protected function updateDisplayList(w:Number, h:Number):void 
    { 
     super.updateDisplayList(w, h); 

// we created _img in createChildren() so we already iknow it is created 
//  if (_img) 
//  { 

// set the size of the image 
      _img.setActualSize(_img.getExplicitOrMeasuredWidth(), _img.getExplicitOrMeasuredHeight(); 
// setting the position is probably fine 
      _img.x = (w - _img.width)/2; 
//  } 
    } 

} 

} 

有一個很好的機會，你可以讓你的生活變得更加簡單通過剛纔創建擴展圖像的的itemRenderer類。這樣的事情：

public class CenteredEmbedImage extends Image{ 
public function CenteredEmbedImage(){ 
    super() 
} 

override function set data(value:Object){ 
    super.data(value); 
    this.source = value.imageSource 
} 

}