5 Replies Latest reply on May 11, 2011 9:29 AM by wilsonsilva7

    Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer

    wilsonsilva7

      I'm extending the Spark List component to make it look like a Halo TileList component with a counter on the top. The default spark List will add a horizontal scroll bar when the contents of the List are wider than its width. That doens't happen when I use a custom itemRenderer. I don't want the horizontal scrollbar always visible. It should be automatic. I've been searching all day for a workaround and I've read the documentation and tried to change most of the component properties but I still can't achieve what I've been looking for. Here's the source code:

       

      Main app

       

      <?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" 
                        backgroundColor="#777777">
           
           <fx:Declarations>
                <fx:XML id="libraryXML" source="/assets/xml/library.xml"/>
           </fx:Declarations>
                     
           <s:List id="library" itemRenderer="CustomItemRenderer" dragEnabled="true" contentBackgroundColor="#777777" selectionColor="0x555555"
                     alternatingItemColors="[0x777777, 0x707070]">
                
                <s:dataProvider>
                     <s:XMLListCollection source="{libraryXML.children()}"/>
                </s:dataProvider>
                
                <s:layout>
                     <s:HorizontalLayout paddingLeft="0" paddingRight="0" clipAndEnableScrolling="true"/>
                </s:layout>
                
           </s:List>
      </s:Application>
      

       

       

      Custom itemRenderer

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          xmlns:s="library://ns.adobe.com/flex/spark" >
           
           <s:states> 
                <s:State name="normal"/> 
                <s:State name="hovered"/>
           </s:states>
           
           <s:Group id="itemsRemaining" x="90" y="5" width="20" height="20">
                <s:Ellipse  height="20" width="20">
                     <s:fill>
                          <s:SolidColor color="0x333333"/>
                     </s:fill>
                </s:Ellipse>
                
                <s:Label text="{data.length}" color="0xFFFFFF" verticalCenter="0" horizontalCenter="0" fontSize="11" fontWeight="bold"/>
           </s:Group>
           
           <mx:Image id="image" source="{data.image}" width="116" height="116" horizontalCenter="0" verticalCenter="0"/>
           <s:Label id="itemName" fontSize="14" text="{data.label}" y="95" horizontalCenter="0" color="white"/>
      
      </s:ItemRenderer>
      

       

      XML dataProvider

       

      <?xml version="1.0"?>
      <items>
           <item>
                <label>stuff 1</label>
                <image>assets/images/img1.png</image>
                <length>4</length>
           </item>
           <item>
                <label>stuff 2</label>
                <image>assets/images/img2.png</image>
                <length>9</length>
           </item>
           <item>
                <label>stuff 4</label>
                <image>assets/images/img3.png</image>
                <length>7</length>
           </item>
           <item>
                <label>stuff 5</label>
                <image>assets/images/img4.png</image>
                <length>2</length>
           </item>
           <item>
                <label>stuff 3</label>
                <image>assets/images/img5.png</image>
                <length>5</length>
           </item>
           <item>
                <label>stuff 7</label>
                <image>assets/images/img6.png</image>
                <length>8</length>
           </item>
           <item>
                <label>stuff 8</label>
                <image>assets/images/img7.png</image>
                <length>11</length>
           </item>
           <item>
                <label>stuff 9</label>
                <image>assets/images/img8.png</image>
                <length>23</length>
           </item>
           <item>
                <label>stuff 10</label>
                <image>assets/images/img9.png</image>
                <length>4</length>
           </item>
           <item>
                <label>stuff 12</label>
                <image>assets/images/img10.png</image>
                <length>2</length>
           </item>
           <item>
                <label>stuff 11</label>
                <image>assets/images/img11.png</image>
                <length>8</length>
           </item>
      </items>
      

       

      Here's a screenshot:

      http://img812.imageshack.us/img812/4331/screenshotir.png

       

      Download Project (84 KB):

      http://www.2shared.com/file/2EpFB3K2/Flex4ListIssue.html

        • 1. Re: Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer
          Shongrunden Adobe Employee

          It looks like nothing is constraining the width of the List so it will just grow as big as it needs to.  Try setting width="100%" on your List.

          1 person found this helpful
          • 2. Re: Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer
            wilsonsilva7 Level 1

            Thanks for your help. I had already tried it and the scroller appeared but it didn't behave like it should. It doesn't shrink more than this:

             

            problem.PNG

             

            As you can see, the scroller arrow on the right side is not visible either.

             

            It's like there's some kind of minWidth on the scroller. I've tried this but I had no success:

             

            // library is the id of my List
            
            
            library.explicitMinWidth = 100;
            library.skin.minWidth = 100;
            library.scroller.minWidth = 100;
            library.minWidth = 100;
            
            

             

            I tried a custom skin and I still had the same problem, I tried to encapsulate everything using a scroller and nothing happened either:

             

            <s:Scroller>
                 <s:Group>
                      <s:List id="library" itemRenderer="CustomItemRenderer" dragEnabled="true" 
                                contentBackgroundColor="#777777" selectionColor="0x555555"
                                alternatingItemColors="[0x777777, 0x707070]" width="100%">
                           
                           <s:dataProvider>
                                <s:XMLListCollection source="{libraryXML.children()}"/>
                           </s:dataProvider>
                                
                           <s:layout>
                                <s:HorizontalLayout paddingLeft="0" paddingRight="0" 
                                                         clipAndEnableScrolling="true"/>
                           </s:layout>
                                
                      </s:List>
                 </s:Group>
            </s:Scroller>
            

            • 3. Re: Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer
              Nishant Jha28

              I think you could fix it in 2 ways

              1) call "invalidateDisplayList()" on the List at "updateComplete" Event.

              2) Dont provide the dataProvider using binding, use preInitialize event to provide the dataProvider.

               

              I think the data is coming after the initial layout. So it is creating this issue. If that is the reason this should fix the issue.

              • 4. Re: Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer
                Shongrunden Adobe Employee

                It will have a minimum size since your application has a minimum width.  Try removing minWidth="955" on your Application.

                • 5. Re: Flex 4: Enable Horizontal Scroll on a List with a custom itemRenderer
                  wilsonsilva7 Level 1

                  No, that's not the problem. But the updateDisplayList() method works.