Search Flex Components Free

Custom Search

December 25, 2007

Flex Cell Renderers Control Inline Text Source Code

Flex Sample Source Code:

This example uses a Text itemRenderer for the second column that changes the font color of those cells and uses the htmlText property of Text to make the cell a link.

InlineCellRanderDemo.mxml

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

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

<mx:Script>
<![CDATA[

import mx.collections.*;

private var catalog:ArrayCollection;

private static var contacts1:Array = [
{URL: "http://www.macromedia.com/software/dreamweaver/",
Product: "Dreamweaver"},
{URL: "http://www.macromedia.com/software/flash/",
Product: "Flash"},
{URL: "http://www.macromedia.com/software/coldfusion/",
Product: "ColdFusion"},
{URL: "http://www.macromedia.com/software/flex/",
Product: "Flex"},
{URL: "http://www.macromedia.com/software/breeze/",
Product: "Breeze"},
{URL: "http://www.macromedia.com/software/director/",
Product: "Director"}
];

private function initCatalog(cat:Array):void
{
catalog = new ArrayCollection(cat);
myDatagrid.dataProvider = catalog;
}

public function generateHtml(http://www.blogger.com/String):String {
return '<a href="'+url+'" target="_blank">'+url+'</a>';
}
]]>
</mx:Script>

<mx:Text text="This example uses a Text itemRenderer for the second column that
changes the font color of those cells and uses the htmlText property of Text
to make the cell a link." width="350" />

<mx:DataGrid id="myDatagrid" width="600" height="300"
creationComplete="initCatalog(contacts1)" >
<mx:columns>
<mx:DataGridColumn dataField="Product" />
<mx:DataGridColumn dataField="URL" width="400">
<mx:itemRenderer>
<mx:Component>
<mx:Text color="0x0000FF"
htmlText="{outerDocument.generateHtml(data.URL)}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</mx:Application>


Related Flex Tutorials