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 
} 

}