Formatting a Flex DataGrid control using a custom item renderer

The following example formats a column in a Flex DataGrid and uses a custom item renderer to color the text red in a cell if a price is below $0. If the item is greater than $0, the test is displayed in black. The price column is also formatted using a custom label function, which uses a CurrencyFormatter, and finally, the data grid column uses a custom sort function to properly sort numeric columns.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

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);

}

}

}

Flex Samples

Latest Flex Samples

Flex Top Links

Formatting a Flex DataGrid control using a custom item renderer

0 comments:

Related Flex Samples

Search Flex Samples
	Submit search form