上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




DataGrid内に画像を表示する方法を以下に記載します。
DataGridColumnに作成したItemRendererを用いて表示しています。

※ 標準のImageコントロールをItemRendererとして使用することもできます。



ImageRenderer.mxml



<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign="middle" horizontalAlign="center"
width="100%" height="100%">

<mx:Image source="{data.source}" width="100" height="100" />
<mx:Label text="{data.filename}" textAlign="center" />

</mx:VBox>


Main.mxml



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="300" height="400">
<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]
private var list:ArrayCollection = new ArrayCollection([
{ label:"画像1", source:"./img1.jpg", filename:"img1.jpg" },
{ label:"画像2", source:"./img2.jpg", filename:"img2.jpg" },
{ label:"画像3", source:"./img3.jpg", filename:"img3.jpg" },
{ label:"画像4", source:"./img4.jpg", filename:"img4.jpg" },
{ label:"画像5", source:"./img5.jpg", filename:"img5.jpg" },
]);

]]>
</mx:Script>

<mx:DataGrid dataProvider="{list}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="ラベル" dataField="label" />
<mx:DataGridColumn headerText="画像" itemRenderer="ImageRenderer" />
</mx:columns>
</mx:DataGrid>

</mx:Application>


実行結果は以下のようになります


少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。