Mudar cor do DataGridColumn
Olá! Hoje venho falar um pouco sobre o componente DataGridColumn que representa uma coluna do DataGrid. O exemplo abaixo popula um DataGrid e muda a cor de uma coluna com referêrencia no seu status, se for ativo ficar verde, se for inativo fica vermelho. Segue o exemplo:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:XMLList id="xml">
<usuario>
<nome>João</nome>
<status>Ativo</status>
</usuario>
<usuario>
<nome>José</nome>
<status>Ativo</status>
</usuario>
<usuario>
<nome>Antonio</nome>
<status>Inativo</status>
</usuario>
</mx:XMLList>
<mx:DataGrid id="dg" width="526" dataProvider="{xml}" x="321" y="169">
<mx:columns>
<mx:DataGridColumn dataField="nome" headerText="Nome"/>
<mx:DataGridColumn paddingLeft="5" dataField="status" headerText="Status" sortable="false">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalScrollPolicy="off">
<mx:Script>
<![CDATA[
///Retorna uma cor determinada dependendo do status
public function formataCorStatus(status:String):uint{
switch(status){
case "Ativo":
return 0x009900; //cor verde
case "Inativo":
return 0xFF0000; //cor vermelha
default:
return 0x000000; //cor preta
}
}
]]>
</mx:Script>
<mx:HBox>
<mx:Label text="{data.status}" color="{formataCorStatus(data.status)}"/>
</mx:HBox>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
A função formataCorStatus que é responsável por pegar os dados da campo status e verificar se o mesmo é ativo ou inativo, ela retorna um uint que é o valor númerico referente a um cor para ser colocado no atributo color do objeto Label. Repare que a função formataCorStatus está dentro do VBox que fica dentro do Componet, isto é feito para que o objeto Label consiga enxergar a função.
Foi necessário usar um objeto Label para que a cor não fosse atribuida a todas as linhas da coluna, para se colocar um objeto Label em um DataGrid também foi preciso de um itemRenderer. Lembrando que está é somente uma das maneiras de se conseguir este resultado.
Ate++.

Comentários