Formatting a Flex DataGrid control using a custom item rendererFormatting a Flex

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;

layout=”vertical”

verticalAlign=”middle”

backgroundColor=”white”>

<mx:Script>

<![CDATA[

import mx.controls.dataGridClasses.DataGridColumn;

import mx.utils.ObjectUtil;

private function price_labelFunc(item:Object, column:DataGridColumn):String {

return currencyFormatter.format(item.@price);

}

private function price_sortCompareFunc(itemA:Object, itemB:Object):int {

return ObjectUtil.numericCompare(itemA.@price, itemB.@price);

}

]]>

</mx:Script>

<mx:XML id=”itemsXML”>

<items>

<item name=”Item 1″ price=”1.32″ />

<item name=”Item 2″ price=”-12.23″ />

<item name=”Item 3″ price=”4.96″ />

<item name=”Item 4″ price=”-0.94″ />

</items>

</mx:XML>

<mx:Style>

.centered {

text-align: center;

}

</mx:Style>

<mx:CurrencyFormatter id=”currencyFormatter”

precision=”2″

useNegativeSign=”false” />

<mx:DataGrid id=”dataGrid” dataProvider=”{itemsXML.item}”>

<mx:columns>

<mx:DataGridColumn dataField=”@name”

headerText=”Name:”

headerStyleName=”centered” />

<mx:DataGridColumn dataField=”@price”

headerText=”Price:”

textAlign=”right”

headerStyleName=”centered”

labelFunction=”price_labelFunc”

sortCompareFunction=”price_sortCompareFunc”

itemRenderer=”PriceLabel” />

</mx:columns>

</mx:DataGrid>

</mx:Application>

PriceLabel.as

package {

import mx.controls.Label;

import mx.controls.listClasses.*;

public class PriceLabel extends Label {

private const POSITIVE_COLOR:uint = 0x000000; // Black

private const NEGATIVE_COLOR:uint = 0xFF0000; // Red

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {

super.updateDisplayList(unscaledWidth, unscaledHeight);

/* Set the font color based on the item price. */

setStyle(“color”, (data.@price <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);

}

}

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s