Flex itemRenderer: using "outerDocument"

2. June 2009 17:50

I discovered a neat little trick today on the topic of inline item renderers for Flex components.  Let's say you have a property that you need to access, but that property is not part of the data object that is passed to the renderer.  Something like this:



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

     <mx:CheckBox id="chkDisplayColor" label="Display Favorite Color"/>
     <mx:CheckBox id="chkDisplayFruit" label="Display Favorite Fruit"/>

     <mx:List>
           <mx:itemRenderer>
               <mx:Component>
                   <mx:HBox width="100%">
                       <mx:Label width="50%" text="{data.name}"/>
                       <mx:Label text="{data.@color}" visible="{outerDocument.chkDisplayColor.selected}"/>
                       <mx:Label text="{data.@fruit}" visible="{outerDocument.chkDisplayFruit.selected}"/>
                   </mx:HBox>                                
               </mx:Component>
           </mx:itemRenderer>
      </mx:List>

</mx:Application>

In this situation, you can use the outerDocument keyword to access the item you are trying to get to.  I haven't seen this work with non-inline renderers, but it is very helpful.  Since you are binding to the checkbox (or a Bindable getter/setter function) whenever the user checks/unchecks the checkboxes, the ui will automatically update to display the items you wish to see.

Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Log in