昨天由于工作的需要，要在FelxViewer原有框架的基础上添加一个widget。Widget主要是显示一些图例和文字。于是我在widget中放置了一个DataGrid，DataGrid有两列，一列放置图片，一列显示文字。
下面是在Flex4中，dataGrid里面放置Image的mxml代码。
<mx:DataGridColumn headerText="图例" dataField="image">
<mx:itemRenderer>
<fx:Component>
<mx:Image width="100" height="50" source="{data.image1}">
</mx:Image>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
刚开始的时候，我直接在source中设置的图片的路径，可惜就是不显示图片。于是我怀疑自己路径写错了。从双引号改为单引号，能想的办法都想了。后来从网上看到一个老外说图片的路径最好用bindable和embed绑定，不然的话可能会显示不出来。实验了一下果然如此。
[ Bindable]
[Embed(source="assets/images/globe.png")]
public var imgObject:Class;
[Bindable]
[Embed(source="assets/images/cn.png")]
public var imgObject2:Class; private var dataProvider:ArrayCollection;
protected function LegendWdg_creationCompleteHandler(event:FlexEvent):void
{
dataProvider=new ArrayCollection([{image1:imgObject,content:"图例一"},{image1:imgObject2,content:"图例二"}]);
legendDG.dataProvider=dataProvider;
}
还有一点需要说明。因为我是一个菜鸟，之前没在Flex中用过datagrid。刚开始的时候我以为就只要设置好dataProvider=dataProvider; 就可以了呢。没有写source="{data.image1}"。导致我费了一些时间。写了dataProvider=dataProvider这句话只代表把数据放置到data中，还需要在source中设置一下。