4 Replies Latest reply on Jan 28, 2011 1:11 AM by Claudiu Ursica

    How to access the itemRenderer from a List?

    peteandrus

      I have a List object which uses custom item renderers. Is it possible to access these objects directly? I searched through the variables for this List in Flash Builder, but nothing jumped out. I saw plenty of references to the dataProvider, but nothing to the item renderers.

       

      the reason for this is that i use a checkBox in my custom item renderer. when a certain checkBox is checked, i want to be able to manipulate the checkBox, both the selection AND the font color.

       

      any help is VERY appreciated.

        • 1. Re: How to access the itemRenderer from a List?
          Shongrunden Adobe Employee

          You really shouldn't interact with item renderer instances directly, but rather modify the data in the dataProvider and build your ItemRenderer in a way that reacts to those changes in data.

           

          If you really do need access the renderers directly you can call getElementAt() on the dataGroup skin part:

           

          myList.dataGroup.getElementAt(0);

           

          But if you are going to do that you have to be aware of the consequences of virtual layout otherwise your changes won't work as you think when scrolling renderers in and out of view.

          1 person found this helpful
          • 2. Re: How to access the itemRenderer from a List?
            jmessary

            <s:List id="list" dataProvider="{panels_xml_collection}" top="5" width="90%" height="780" borderVisible="false" horizontalCenter="0" rollOverColor="#FFFFFF" scroller="{parentApplication.my_scroller}">
                    <s:layout>
                        <s:TileLayout horizontalAlign="center" columnAlign="justifyUsingWidth" horizontalGap="15" requestedColumnCount="4"
                                      requestedRowCount="4" verticalGap="10"/>
                           
                    </s:layout>   
                    <s:itemRenderer>
                        <fx:Component>
                            <s:ItemRenderer>
                                <s:Panel width="200" height="250" borderVisible="false" chromeColor="#2D455D" color="#FFFFFF"
                                         cornerRadius="10" fontSize="16" title="{data.product_name}" click="outerDocument.slide_panel(data.product_id)" >
                                    <s:Image y="5" width="75" height="75" horizontalCenter="0" source="{data.image_source.toString()}"   />
                                    <s:Label x="6" y="88" color="#000000" fontSize="10" text="Retail Price:"/>
                                    <s:Label x="10" y="106" color="#000000" fontSize="14" text="Our Price"/>
                                    <s:Label id="retail_price" x="70" y="88" color="#000000" fontSize="10" text="${data.retail_price}"/>
                                    <s:Label id="our_price" x="70" y="106" color="#000000" fontSize="14" text="${data.our_price}"/>       
                                </s:Panel>   
                            </s:ItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:List> 

             

             

            You can do something similar to that.  When someone clicks a panel it calls a function in my script slide_panel(x:String):void

            I then have a window slide out containing more information about what they clicked on.  You could write your function to change the dataProvider which would result in it changing your List.  Note to call the function in the itemRenderer you have to use outerDocument.function_name()

             

            I spent quite a bit of time trying to get that to work with an external itemRenderer with no luck, so I had to use the inline version.  Works the same just clutters the code a bit.

             

            Cheers.

            1 person found this helpful
            • 3. Re: How to access the itemRenderer from a List?
              peteandrus Level 1

              thanks guys, i had a pretty major 'lightbulb' moment after i wrote this.

               

              i remembered something i had read in another forum post that i should be manipulating the dataProvider elements, NOT the display itself.

               

              So what i did was bind the checkBox's 'selected' field in my itemRenderer to the 'selected' field in my dataProvider and VOILA it worked!

               

              at the top level i just listened for the click, got the dataProvider from the List, then iterated through the dataProvider, setting the value of 'selected' in all dataProvider elements to the value of the checkBox being checked (outside the List). it works great!

               

              thanks again. i have been trying to conquer this for a day or so. it's a good feeling...

              • 4. Re: How to access the itemRenderer from a List?
                Claudiu Ursica Level 4

                You mean to manipulate the checkbox and font color in the whole list or just the

                one you checked / unchecked?

                 

                 

                Look a t this dig into the blog it has some nice stuff how to do it ...

                http://noclevercode.wordpress.com/2010/05/22/go-ask-your-container/

                 

                There is the other way in which you bind the checkbox.selected to a Boolean

                inside your data. Optional you cand add font color in there. Seem a little bit

                like not the right separation of concerns bu it will do the trick.

                 

                C