Skip to content
July 18, 2008 / Shrikant Patil

Accessing the application properties and methods within inline item renderers

As we know we use the blocks to create the inline item renderers for a list based components, which is warped within the take a look;


<mx:datagridcolumn datafield="someField">
<mx:itemrenderer>
<mx:component>
<mx:image>
</mx:image>
</mx:component>
</mx:itemrenderer></mx:datagridcolumn>

In the above example we are using a image component as a inline item renderer for a datagrid column.
The question is; say that i have a public scoped variable or a method in the main application and want to use it within the item renderer or want to call a method of application from the item renderer when user clicks on the image component.
The way is to use ‘outerDocument’ property of a component.assume that we have a public scoped variable which holds the source path for the item renderer image component, and a method which need to be get called when user clicks on the image. let us see the code;


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<!&#91;CDATA&#91;
import mx.collections.ArrayCollection;
import mx.controls.Alert;

&#91;Bindable&#93;
public var imagePath:String = "assets/logout.png";

&#91;Bindable&#93;
private var dp:ArrayCollection = new ArrayCollection(&#91;
{label:"test1",data:1},
{label:"test2",data:2},
{label:"test3",data:3},
{label:"test4",data:4}
&#93;);

public function clickHandler():void{
mx.controls.Alert.show("You Clicked On the Image");
}
&#93;&#93;>
</mx:Script>
<mx:DataGrid dataProvider="{dp}">
<mx:columns>
<mx:DataGridColumn dataField="label"/>
<mx:DataGridColumn dataField="data">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="{outerDocument.imagePath}" click="outerDocument.clickHandler()"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
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

%d bloggers like this: