タイトル
 メニューにないコーナーはTopからいけます
TOP覚え書きFlex → This Page
Flexサンプル

DataGrid 行に画像表示

サンプル概要

DataGrid の行内に画像を表示します。

サンプルイメージ

サンプル画像


サンプルソース

DataGridColumn の itemRenderer を Image にしてやるだけで表示可能です。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="546" height="279">
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			
			/** 表示用XML */
			[Bindable]
				private var xmldata:XML =
					<root>
						<List text="AAAAAAAAAA" imgUrl="./img/1.gif" />
						<List text="BBBBBBBBBB" imgUrl="./img/2.gif" />
						<List text="CCCCCCCCCC" imgUrl="./img/3.gif" />
						<List text="DDDDDDDDDD" imgUrl="./img/4.gif" />
					</root>;
			
			[Bindable]
				public var list:XMLListCollection = new XMLListCollection(xmldata.List);
			
		]]>
	</mx:Script>
	
	<!-- データグリッド -->
	<mx:DataGrid id="dataGrid" x="10" y="10" dataProvider="{list}">
		<mx:columns>
			<mx:DataGridColumn headerText="文字" dataField="@text"/>
			<mx:DataGridColumn headerText="画像" dataField="@imgUrl" itemRenderer="mx.controls.Image"/>
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>

サンプルソースのダウンロード

サンプルのダウンロード(ZIP圧縮)(Flex builder 2 用のプロジェクトファイルも同梱)

更新履歴

2008/03/27 本ページ新規追加


TOP覚え書きFlex → This Page
Valid CSS!