Changing values in custom item renderer

I have an xml feed that I am using to populate a List control. The list control has it's itemRenderer property set to CustomListItem which a custom component built by me to display various pieces of data from the xml along with an icon. At certain points I would like to ba able to tell one of the fields in CustomListItem to change from displaying xml.firstData to xml.secondData depending on a radio button selection but I can't find a way to access the properties of CustomListItem from main.mxml (which is where the radio buttons are).
At the moment the values in CustomListItem are set using functions within it to parse the 'data' property.
Sorry if this is a bit of a sketchy explanation of my problem Any suggestions would be great.
Cheers

I hope this code represents your situation, but at least I hope it helps you!
----------------------- main app ----------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
  height="100%" creationComplete="dataRequest.send();"
  xmlns:comp="*" horizontalAlign="left">
  <mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import MyListItems;
      import mx.collections.XMLListCollection;
      [Bindable] private var xmllist:XMLList;
      [Bindable] private var xlc:XMLListCollection;
      private function resultHandler(evt:ResultEvent):void{
        xmllist = evt.result.item;
        xlc = new XMLListCollection(xmllist.firstData);
      private function changeData(evt:Event):void{
        if(evt.currentTarget.label == "First Data"){
          xlc = new XMLListCollection(xmllist..firstData);         
        }else{
          xlc = new XMLListCollection(xmllist.secondData);         
    ]]>
  </mx:Script>
  <mx:HTTPService id="dataRequest" useProxy="false" url="data.xml"
    resultFormat="e4x" result="resultHandler(event)"/>
  <mx:RadioButtonGroup id="items"/>
  <mx:RadioButton group="{items}" label="First Data" change="changeData(event)"
    selected="true"/>
  <mx:RadioButton group="{items}" label="Second Data" change="changeData(event)"/>
  <mx:List width="100" height="150" itemRenderer="MyListItems"
    dataProvider="{xlc}"/>
</mx:Application>
----------------------- item renderer --------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Text text="{data}"/>
</mx:HBox>
------------------------------- data.xml ---------------------------
<?xml version="1.0" encoding="utf-8"?>
<mydata>
  <item>
    <firstData>apples</firstData>
    <secondData>oranges</secondData>
  </item>
  <item>
    <firstData>beef</firstData>
    <secondData>chicken</secondData>
  </item>
  <item>
    <firstData>milk</firstData>
    <secondData>juice</secondData>
  </item>
  <item>
    <firstData>carrot</firstData>
    <secondData>tomato</secondData>
  </item>
</mydata>

Similar Messages

  • Data provider problem in custom item renderer

    I have a complex, custom item renderer for a list. I add
    items that I extracted from an xml to the data provider using the
    IList interface. But when displaying the list, the items are all
    screwed up. Each rendered item has some parts which are initialized
    as different components depending on the values from the xml. This
    initialization is called in the item renderer for the
    creationComplete event.
    The weird thing is that when I output the dataProvider to
    check its values, some of the items have internal uids sometimes
    and sometimes they don't. If I output the dataProvider right after
    I add the items to it, none of them get internal uids. But from the
    initialize method, some of them do and some don't.
    To make things weirder, sometimes, as I scroll up and down
    the list, the dynamic components get all switched up. I'm either
    having a problem with internal uids or with the creation policies
    for lists. Or it's probably some simpler mistake I have yet to see.
    Anyone have any idea where the problem could lie? Any help is
    greatly appreciated.

    Any successful render must:
    1) override the set data property of the component
    Further, best practice is to store any data you need in the
    override set data(), and call invalidateProperties(). Then do the
    actual work in an override commitProperties() function.
    The framework is smart about when to call commitProperties
    efficiently. set data() gets called much more often.
    Tracy

  • Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

    Hi again, developers:
    I'm in a search of a datagrid  with certain characteristics:
         - variableRowHeight = "true"
         - only one column
         - each row must have a custom item renderer with possibly different heights, and a fixed width
         - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
         - and no extra empty rows must appear in the last positions of the datagrid
    The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
    <mx:Script>
         <![CDATA[
         private function resize():void
                    if (dg.dataProvider)
                        var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                        dg.height = h;
         ]]>
    </mx:Script>
    <mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
            dataProvider="{dp}"
            wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
            <mx:columns>
                <mx:DataGridColumn headerText="ID" width="50">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
            </mx:columns>
        </mx:DataGrid>

    Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
    I'll update this thread if I manage to do it.

  • Range component in custom item renderer

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

    Hi,
    I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
    If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
    Thanks.
    Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
    Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
    FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
              at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
              at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
              at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
              at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
              at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
    *** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
              at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
              at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
              at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
              at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
              at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
              at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
              at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
              at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
              at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
              at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
              at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

  • How To dynamically change values in custom form

    Hi,
    Requirement is to change values in custom form dynamically that are passed by Global variables through standard form .
    I have used forms personalization to call custom form and passing some parameters to custom form using global variables.
    Now i have to change values displayed in custom form(already opened) when user moves from one record to another record.
    I cannot change the standard form.Only i have write logic in custom form that dynamically changes values as user moves from one record to another in standard form.
    Global variables values will be different for each record.
    Pls let me know how i can achieve this.
    Regards
    Udit

    Udit,
    Your question should be posted to the Enterprise Business Suite (EBS) forum. This forum is dedicated to non-EBS forms development.
    Craig...

  • Vendor Line Item Display-Default value for customer items

    Is it possible in selection screen of transaction FBL1N (Vendor line item display) the default value of field "customer items" to be checked?
    Thanks in advance.

    hi Tsiami
    it's not possible. if u want check customer line items go throw this TC:FBL5N
    plz assign points
    regards
    sivareddy.

  • Pass a value to an item renderer button

    I have a datagrid.  One of the columns has a value of "@recipe", with is a string that's a URL.
    I need to replace this with a link button that goes to this url.
    So I created an Item Renderer:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
         <![CDATA[
              private var linkToGoTo:String = XML(data).@recipe
              private function goRecipe(event:MouseEvent):void {
              trace("Link="+linkToGoTo);
         ]]>
    </mx:Script>
    <mx:LinkButton id="related" label="Related Recipe" click="goRecipe(event)" />
    </mx:Canvas>
    Problem is that I am not getting my XML value.   If I did this:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
         <![CDATA[
              private function goRecipe(event:MouseEvent):void {
              trace(event.currentTarget.label);
         ]]>
    </mx:Script>
    <mx:LinkButton id="related" label="{XML(data).@recipe}" click="goRecipe(event)" />
    </mx:Canvas>
    This works, but of course I do not want the label to be this long URL.  How would I do this?

    OK, I got it to work like this, not sure if it's the best way:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
         <![CDATA[
              private var relatedRecipe:String
              override public function set data(value:Object):void
            if(value != null)
               super.data = value;
               relatedRecipe = value.@recipe
               if (relatedRecipe.length>1) {
                    trace("recipe="+relatedRecipe);
                    related.visible = true;
               } else {
                    related.visible = false;
            private function goRecipe(event:MouseEvent):void {
                 var linkToGoTo:URLRequest = new URLRequest(relatedRecipe);
                 navigateToURL(linkToGoTo, "_blank");
         ]]>
    </mx:Script>
    <mx:LinkButton id="related" label="Related Recipe" click="goRecipe(event)" textDecoration="underline" fontSize="10" styleName="recipeLinkButton" />
    </mx:Canvas>

  • Custom Item Renderer Issue for List

    Hi,
    I have a List that uses a custom renderer that contains a
    combo box and a checkbox.
    If i define the data provider inline in MXML both the
    combobox and the checkbox render values correctly.
    However, if I switch the dataprovider to an AS 3.0
    ArrayCollection using same name/value pairs, the checkbox renders
    properly but the combo box doesn't show text values. What is weird
    is that if I trace the data, the value is accessible but it won't
    show in combo.text of control.
    Any ideas?

    The creationComplete event is called ONCE and that's it. But
    each time an itemRenderer is recycled it will have its data
    property reset with new a new record from the dataProvider. Thus
    overriding the set data function lets you inspect the data and do
    what you want with it.
    Data binding in MXML <mx:Image source="{data.image}" />
    is set up by the Flex compiler. When the data property is reset it
    will trigger the data binding notifications. The Flex
    compiler-generated code will intercept that and update the Image
    source property.
    If you use MXML, then use data binding. If you write your
    itemRenderer in ActionScript, override the set data
    function.

  • Help with datagrid custom item renderer

    Hi ,
    I have a datagrid in which I have a column with a checkbox and a custom Checkbox header renderer and an item renderer.
    When I try to disable the grid the checkbox column does not get disabled?
    Is there any way I can disable the entire grid along with the checkbox column?
    Thanks.

    Override updateDisplayList on the renderer and set the .enabled to match
    owner.enabled.

  • How to change value of an item through another item???

    Hello guys,
    I have couple of items in my form page, now depending on one item, I wanna change(from disable to enable or vice versa) the values of all other items in that form....
    I thnk for this javascript is required...... but i new bee so if anybody can help me out with these.........
    how to do that????? does anybody has good example or any link.....
    plz help me with this issue.......... appreciated
    thxs
    regards,
    gk

    hi folks,
    I am trying the same but still didnt found any sucess..... my scenario is like this:-
    I have one radio button(P1_DETAILS_YN) and another as text box(P1_NAME), I have written below code under HTML Header(Edit page attribute)
    <script language="javascript">
    function checkSelect('P1_DETAILS_YN', 'P1_NAME')
    if (document.getElementById('P1_DETAILS_YN').value=='Y')
    {document.getElementById('P1_NAME').disable=true;}
    else
    {document.getElementById('P1_NAME').disable=false;}
    </script>
    and following under HTML Form Elements Attributes of P1_DETAILS_YN as:-
    onchange="checkSelect(this.value, html_GetElement('P1_NAME))"
    other than this do I miss anything else guys................ if so than let me know ASAP
    thxs
    regards,
    gk

  • How can I use the CustomEvent in custom Item Renderer

    Hi all.
    I have a small problem, which i must solve.
    I have a ImageRenderer - TileList with a custom ItemRenderer.
    When I choose a picture a button appears (in the ItemRenerer) and when I click it it throws an event with the name of the picture.
    The Problem is, that i can not add an event Listener to the ItemRenderer.
    Can anybody help me to resolve this problem?

    But how can I catch it in the top of the list??????
    The ItemRenderer is a IFactory Class Object, which has only one function newInstance().
    I repeat it again, there is no addEventListener or something else for the ItemRenderer.
    I can give you only a header of the code because it is a big project (and if somebody have a solution or an example, maybe he could give me the it, please)
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"
         dataProvider="{imageList}"
         labelField="label"
         iconField="thumbnail"
         itemRenderer="{new ClassFactory(ThumbnailRenderer)}" verticalScrollPolicy="auto">......
    and the renderer
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
              horizontalAlign="center" verticalAlign="middle" creationComplete="init()"
              xmlns:DataModels="DataModels.*"
              click="selectedHandler()" height="125">
         <mx:Image source="{data.thumbnail}"
                  width="80"
                  height="50"                    horizontalCenter="0"
                     verticalCenter="0" horizontalAlign="center" verticalAlign="middle"/>
         <mx:Label text="{data.label}"
                   horizontalCenter="0"
                   bottom="0" />
         <mx:Metadata>
             [Event(name="addImageEvent", type="DataModels.AddImageEvent")]
        </mx:Metadata>
    The button is created dynamicly. When i clicked it, then i dispatch a new AddImageEvent
    like this
    ...button.addEventListener(MouseEvent.CLICK, dispatchAddImageEvent);...private function dispatchAddImageEvent(event:Event):void{     var addImageEvent:AddImageEvent = new AddImageEvent(AddImageEvent.ADD_IMAGE_EVENT);     dispatchEvent(addImageEvent);}
    Inside the renderer i can catch it, because there is the addEventListener method, but not in the ITEMRENDERER (IFactory element)

  • Changing text color of item renderer in datagrid

    Hi,
    I have the following datagrid:
    <mx:DataGridColumn field="name" ......... />
    <mx:DataGridColumn itemRenderer="myRenderer" ...... />
    In myRenderer, I extend from the TextInput class; with the
    text color:WHITE
    My question is:
    When I do a mouse rollover/selection on any row of the
    datagrid, how can I change the text color of my renderer?
    If I add the rollover/selection event listener for my
    renderer, it will only change the color when my mouse is over its
    column.
    I want it to change colour whenever the row is selected/
    rollover.
    Thank you very much.
    Regards,
    hy

    Hi,
    The rollOverColor and selectionColor style on the Datagrid
    will only work for the normal columns.
    Since my column extends from the TextInput, the rollOverColor
    and selectionColor style does not seem to have any effect on the
    itemrenderer.
    hy

  • Custom item renderer

    I want to render the data into icons. But I cannot seem to
    make the codes reusable for multiple columns. The following are my
    codes. I know there must be something wrong with my logical
    thinking.

    "irislpc" <[email protected]> wrote in
    message
    news:gf20sa$2mu$[email protected]..
    >I want to render the data into icons. But I cannot seem
    to make the codes
    > reusable for multiple columns. The following are my
    codes. I know there
    > must be
    > something wrong with my logical thinking.
    I think the AdvancedDataGridGroupItemRenderer has logic to
    suppress display
    of the icon if it's not being used in the first column. And
    an ordinary
    AdvancedDataGridItemRenderer has no logic to support icons.
    HTH;
    Amy

  • How to make a item renderer have a custom and rounded corners background

    Hi,
    I'm using custom item renderer for items of list. However,
    there is still one thing I haven't made yet. I can't put a
    background with a custom color and with rounded corners.
    How can I do that?
    It seems that all the options I try don't work.
    Can someone give me a tip here?
    Thanks,
    Nuno

    "sinosoidal" <[email protected]> wrote in
    message
    news:gese3u$63n$[email protected]..
    > Hi,
    >
    > I'm using custom item renderer for items of list.
    However, there is still
    > one
    > thing I haven't made yet. I can't put a background with
    a custom color and
    > with
    > rounded corners.
    >
    > How can I do that?
    >
    > It seems that all the options I try don't work.
    >
    > Can someone give me a tip here?
    Check out my extended TileList:
    http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html
    You might want to swipe the itemRenderer from this example
    and modify it:
    http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html

  • When to use Drop In Item renderer and InLine Item Renderers ??

    Hi ,
    I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
    What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
    What i read from tutorilas that we cant use Drop In because they say ,  The only drawback to using  drop in is that them is that you cannot configure them
    Please help me .

    Hi Kiran,
    Here is the detailed explanation you needed:
    You can also refer the link below:
    http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
    Drop-In Item Renderers
    Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
    In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.
    <!-- Drop-in Item Renderer: Image control -->
    <mx:DataGridColumn dataField="photo"
                       headerText="Employee Photo"
                       itemRenderer="mx.controls.Image"/>
    Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
    Inline Item Renderers
    Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
    It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
    <mx:DataGrid id="myGrid" dataProvider="{gridData}">
       <mx:columns>
          <mx:DataGridColumn headerText="Show Relevance">
             <mx:itemRenderer>
                <mx:Component>
                   <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                             toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                             click="outerDocument.toggle()" />
                </mx:Component>
             </mx:itemRenderer>
          </mx:DataGridColumn>
       </mx:columns>
    </mx:DataGrid>
    Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
    public function toggle():void
    Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.
    <!-- Reusable inline Item Renderer -->
    <mx:Component id="ImageRenderer">
       <mx:VBox width="100%" height="140"
                horizontalAlign="center" verticalAlign="middle">
          <mx:Image source="{'assets/'+data.image}"/>
          <mx:Label text="{data.image}" />
       </mx:VBox>
    </mx:Component>
    <!-- Used within a list-based control-->
    <mx:DataGridColumn headerText="Image"
                       dataField="image" width="150"
                       itemRenderer="{ImageRenderer}"/>
    In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
    If this post answers your question or helps, please kindly mark it as such.
    Thanks,
    Bhasker Chari
    Message was edited by: BhaskerChari

Maybe you are looking for

  • Now that iOS 6 is here, how do I update to iOS 5?

    I have an iPod Touch 4G (model MC540FD). iOS 6 is now available from iTunes, but for pedagogical purposes, I don't want to update my iPod to iOS 6 for the moment. I just want to update from iOS 4.3.5 to iOS 5. So, I manually downloaded the .ipsw file

  • Printing on my mac whilst connected to windows 2003 remote desktop connecti

    Hi, please can somebody help. I have a MacBook Pro and i am connecting to a windows 2003 server using microsoft remote desktop connection. I need to print on the printer connected to my mac. How do I get windows to see the printer that is connected t

  • BPM Workspace can't display the flash movie with IE

    Hi We have the following problem, we have a BPM project with a flash screen, when we execute the project in the workspace of BPM studio we can see the Flash, but when we published the project in BPM Enterprise , the workspace can't display the flash

  • In order sales (VA01), I need to create MRP after release credit.

    Hi! All Material / New Item included in a sales order (VA01) enters as the Schedule line category = "CN" (without MRP). But if the client has released credit the program needs to change the Schedule line category for "CP" (with MRP), and create a "MR

  • Multiple JDBC Connections

    I am running net8 with oracle 8.1.7 on linux. I have an applet that connects to the database. I seem to lose my connection when another applet starts and connects to the database. Anyone know why I can't get more than one database connection?