Inserindo ícones em uma DataGrid com itemRenderer

Neste post, mostro como inserir ícones em uma DataGrid, algo muito útil em DataGrids

onde há funções para o usuário editar e excluir registros.

Deixe o código do seu arquivo .mxml principal como o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<!--
	Utilizo a tag mx:Model para definir a estrutura de dados que populará a DataGrid.
	
	A tag mx:Model define um objeto(Object) utilizando uma estrutura xml.
	
	Ao atribuir um id a tag model podemos refericiar os dados usando ponto(.).
	Exemplo:Para visualizar o nome dos times, use modelPaulistas.clube.nome.
	Obs.:A tag raiz da estrutura, <clubes>, não é utlizada na referência. 
	-->
	
	<mx:Model id="modelPaulistas">
		<clubes>
			<clube nome="Palmeiras" libertadores="true" />
			<clube nome="Santos" libertadores="true" />
			<clube nome="São Paulo" libertadores="true" />
			<clube nome="Corinthians" libertadores="false" />
		</clubes>
	</mx:Model>
	
	<!--
	Definimos como dataProvider(provedor de dados) da DataGrid,	a tag model acima da seguinte forma: 
	dataProvider="{id.tag_que_se_repete}";
	obs.:as chaves são para fazer o binding dos objetos, quando houver qualquer alteração no model,
	a dataGrid será atualizada.
	
	Nas colunas da dataGrid definimos qual atributo do model será exibido através da propridade
	dataField, apenas atribuindo o nome da propriedade do objeto model.
	
	Na coluna Libertadores, através da propriedade itemRenderer, faço referência a um outro arquivo(classe)
	mxml, para cada item da dataGrid, o aquivo será invocado.
	-->

	<mx:DataGrid x="10" y="10" dataProvider="{modelPaulistas.clube}">
		<mx:columns>
			<mx:DataGridColumn headerText="Clube" dataField="nome"/>
			<mx:DataGridColumn headerText="Libertadores" itemRenderer="dataGridIcons"/>
		</mx:columns>
	</mx:DataGrid>	

</mx:Application>

Crie um novo MXML Component chamado dataGridIcons, based on HBox e 0 para width e Height.
e deixe o seu código como o código abaixo:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center">
	
	<!--
	Para cada item da dataGrid esse arquivo(classe) será invocado,
	ao ser invocado é passado um objeto, data, onde é possível acessar os
	dados da classe que o invocou, nesse caso a dataGridColumn.
	
	Na propriedade source da tag Image, fiz um operador ternário, equivalente a um if-else,
	onde se liberdadores for true exibe a imagem checked.png, senão exibe notChecked.png.  
	-->
	<mx:Image source="{data.libertadores ? 'checked.png' : 'notChecked.png'}" />
	
</mx:HBox>