Flex DataGrid Itemrenderer Image not displaying
All, I have a Datagrid with an ItemRenderer assigned to a column which is a Currency column(String). The renderer is mean to display the Flag of the currency eg; for USD it should display a USD flag image etc. At the moment the column is appearing Blank without an image. I have the following renderer (which extends UIComponent). I am dynamically loading the images in the commitProperties() method. At the moment I have hard-coded it to the USD image to get it t开发者_如何学编程o work - but no luck. Any help would be greatly 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;
}
}
}
}
It looks like you're doing a lot of things wrong. First, don't remove and re-create the image each time, create it once in the createChildren() method and just change the source property. Second, I don't see you setting the height or width of the image anywhere. Be sure to do that, usually in updateDisplayList. Third, in the measure method I would recommend setting measuredHeight and measuredWidth with the measuredHeight and measuredWidth of the image. I usually use the getExplicitOrMeasuredHeight and getExplicitOrMeasuredWidth methods.
Fourth why are you using a URL Loader? Just use the Image tag and set the source.
This isn't tested code, but I might change your itemRenderer something like this:
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;
// }
}
}
}
There is a good chance you could make your life a lot easier by just creating an itemRenderer that extended the image class. Something like this:
public class CenteredEmbedImage extends Image{
public function CenteredEmbedImage(){
super()
}
override function set data(value:Object){
super.data(value);
this.source = value.imageSource
}
}
精彩评论