3 Replies Latest reply on May 9, 2010 12:20 AM by Flex harUI

    List Control ItemRenderer issue

    jerry98225 Level 1

      Hi Guys I am working on a small photo Gallery. I create a xml file and try to link it to my List control with itemrenderer.

      However, when I tried to save the file, I got access of undefined property "data" error.

      I thought we are suppose to use "data" to refer the current row of the data object. Here is my code...and thanks a lot!

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           
      xmlns:s="library://ns.adobe.com/flex/spark"
           
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
      <fx:Declarations>
       
      <fx:Model id="pictureXML" source="data/pictures.xml"/>
       
      <s:ArrayList id="pictureArray" source="{pictureXML.picture}"/>
      </fx:Declarations>



      <s:List id="pictureGrid" dataProvider="{pictureArray}"
        
      horizontalCenter="0" top="20">
       
      <s:itemRenderer>
        
      <fx:Component>
         
      <s:HGroup>
          
      <mx:Image source="images/big/{data.source}" /> // where the error happen
          
      <s:Label text="{data.caption}"/> // where the error happen
         
      </s:HGroup>  

        
      </fx:Component>
       
      </s:itemRenderer>
      </s:List>


      </s:Application>

       

       

      My xml

       

       

       

      <?xml version="1.0"?>
      <album>
        
      <picture>
        
      <source>city1.jpg </source>
        
      <caption>City View 1</caption>
        
      </picture>
         
      <picture>
        
      <source>city2.jpg </source>
        
      <caption>City View 2</caption>
        
      </picture>
          
      <picture>
        
      <source>city3.jpg </source>
        
      <caption>City View 3</caption>
        
      </picture>
         
      <picture>
        
      <source>city4.jpg </source>
        
      <caption>City View 4</caption>
        
      </picture>
         
      <picture>
        
      <source>city5.jpg </source>
        
      <caption>City View 5</caption>
        
      </picture>
         
      <picture>
        
      <source>city6.jpg </source>
        
      <caption>City View 6</caption>
        
      </picture>
         
      <picture>
        
      <source>city7.jpg </source>
        
      <caption>City View 7</caption>
        
      </picture>
         
      <picture>
        
      <source>city8.jpg </source>
        
      <caption>City View 8</caption>
        
      </picture>
         
      <picture>
        
      <source>city9.jpg </source>
        
      <caption>City View 9</caption>
        
      </picture>
         
      <picture>
        
      <source>city10.jpg </source>
        
      <caption>City View 10</caption>
        
      </picture>
      </album>

      I appreciate any helps!!!

        • 1. Re: List Control ItemRenderer issue
          Gregory Lafrance Level 6

          Although it seems strange, you apparently need another <s:ItemRenderer> tag after the <fx:Component> tag:
                

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"       
                         xmlns:s="library://ns.adobe.com/flex/spark"       
                         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
            <fx:Declarations>  
              <fx:Model id="pictureXML" source="data/pictures.xml"/>  
              <s:ArrayList id="pictureArray" source="{pictureXML.picture}"/> 
            </fx:Declarations> 
            <s:List id="pictureGrid" dataProvider="{pictureArray}"    
                    horizontalCenter="0" top="20">  
              <s:itemRenderer>   
                <fx:Component>    
                  <s:ItemRenderer>
                  <s:HGroup>     
                    <mx:Image source="images/big/{data.source}" />      
                    <s:Label text="{data.caption}"/>     
                  </s:HGroup>    
                  </s:ItemRenderer>
                </fx:Component>  
              </s:itemRenderer> 
            </s:List>
          </s:Application>
          


          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex Training and Support Services

          • 2. Re: List Control ItemRenderer issue
            jerry98225 Level 1

            Thanks Greg. I just figured out that removing Hgroup tag and use vbox or hbox would solve the problem too.

            • 3. Re: List Control ItemRenderer issue
              Flex harUI Adobe Employee

              To be clear, it is not "another".  <s:itemRenderer> is a property on List,

              while <s:ItemRenderer> is a class that supports an interface that provides a

              data property.

              1 person found this helpful