Item renderers are the key to customizing just about any Flex controls. If you want numbers in a data grid column to be green or red (based on whether they are positive or negative), you use a cell renderer. If you want list items to be displayed on multiple lines with data from multiple fields combined in a single display, you use a renderer. If you are using TileList to display data, then again you use a renderer to actually define the display.
Renderers can be written in MXML or ActionScript, and here is one reason why you may want to opt for the latter.
The following is a simple DataGrid example. An array contains five objects, each with three values, and then the results are displayed in a DataGrid.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="400" width="600">
<mx:Script>
<![CDATA[
[Bindable]
public var myDP:Array =
[
{region:"East", q1:100000, q2:130000},
{region:"West", q1:175000, q2:210000},
{region:"Northwest", q1:95000, q2:110000},
{region:"South", q1:125000, q2:75000},
{region:"Southwest", q1:145000, q2:160000}
]
]]>
</mx:Script>
<mx:DataGrid id="myDG" dataProvider="{myDP}">
<mx:columns>
<mx:DataGridColumn dataField="region" headerText="Region" />
<mx:DataGridColumn dataField="q1" headerText="Q1" />
<mx:DataGridColumn dataField="q2" headerText="Q2" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
Now what if you wanted the numbers right aligned and formatted using thousands separators? That's a job for a custom renderer, and here is an MXML example that would do the trick:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:NumberFormatter id="nf" useThousandsSeparator="true" />
<mx:Label textAlign="right" text="{nf.format(data.q1)}" width="100%" />
</mx:VBox>
To use this renderer you'd just change the DataGridColumn, like this (assuming the renderer was named MyRenderer.mxml):
<mx:DataGridColumn dataField="q1" headerText="Q1" itemRenderer="MyRenderer"/>
But what if you wanted to then reuse the renderer for both of the numeric columns? The renderer receives an object named data that contains the object to be displayed, and has to specify the column to be displayed, hard coded (in this case data.q1). As such, you would need another renderer, just like the first, but with a different column specified.
To get around this problem you could implement IDropInListItemRenderer so as to obtain column info, but there is a cleaner option. Here is the ActionScript renderer:
package {
import mx.controls.Label;
import mx.formatters.NumberFormatter;
public class MyRenderer extends Label
{
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
setStyle("textAlign", "right");
var nf:NumberFormatter = new NumberFormatter();
nf.useThousandsSeparator=true;
this.text=nf.format(this.text);
}
}
}
This version accomplishes the same result, but is not column specific, and can thus be used in multiple DataGrid columns, as seen here (assuming the file is named MyRenderer.as):
<mx:DataGridColumn dataField="q1" headerText="Q1" itemRenderer="MyRenderer" />
<mx:DataGridColumn dataField="q2" headerText="Q2" itemRenderer="MyRenderer" />
However I'd like to have a seperate subfolder for this type of formatting e.g Examples/myFormatters/MyRenderer.as
Do I need to name the package and how would I refer to it in the mxml file Examples/reusableRenderer.mxml
I'm having a bit of trouble sorting this out
Cheers
private formatter:NumberFormatter;
public function MyRenderer() {
super();
formatter = new NumberFormatter();
formatter.useThousandsSeparator=true;
}
public override function set text(value:String):void {
super.text(formatter.format(value));
}
I have a DataGrid with 10 columns and 5 rows.Now i want to access each row in that column(column name=name) i.e access each each name and give different color for each name.Now when i use text="{data.name}", it is selecting same color for all names.Is there a way I can access each element(cell) and give different colors?
MyRenderer.mxml
<mx:Label textAlign="right" text="{data.name}" alpha="0.1" color="#ff0033" width="100%" />
Yes, you will have to specify a package name, like:
package Examples.myFormatters
{
Also, change the itemRenderer property to "Examples.myFormatters.MyRenderer".
Hope that helps.
-James
<mx:DataGridColumn dataField="col6" headerText="Column #6">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="100%" horizontalAlign="center"
creationComplete="initRenderer();">
<mx:Script>
<![CDATA[
private function initRenderer() : void
{
/**
* Can I here get the access to the
* current dataField of this column?
* Yes, I can get here the value of
* this column by using data.col6,
* but I need to write universal
* component. The problem is that
* I can't get access to the listData
* because component based on container: HBox
*/
}
]]>
</mx:Script>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
Please, give me any advice.
Thanks,
Chris Lee
dg.columns[i].itemRenderer = "mx.controls.Image";
But this throws an Error #1034 Type coercion "mx.controls.Image" could not be transformed to mx.core.IFactory.
Any Ideas?
Thanks in Advance
http://livedocs.macromedia.com/flex/2/langref/mx/c...
this works!!!
var cf:CurrencyFormatter = new CurrencyFormatter();
cf.useNegativeSign=true;
cf.useThousandsSeparator=true;
cf.precision=2;
cf.currencySymbol="$";
this.text=cf.format(this.text);
Am I missing something here?
in short, reading the state of the cell "this.text" is not reliable (or so it seems) when sorting.
probably best to just remote this example. thx.