7 Replies Latest reply on Sep 24, 2010 2:06 AM by Manystems-Arjen

    TileLayout left to right

    Manystems-Arjen

      Hello,

       

      I'm trying to create a grid of items of 10X10 with the tileLayout in a list.

      This works fine untill i reach more than 100 items.

       

      When there are more than one 100 items i would like to add a new column and not a row, so the grid expands in the width and not the height.

      When is use the "requestedRowCount" property of the TileLayout for this it works only the grid is now filled from the top to the bottom, instead of left to right.

       

      Does anyone have a tip of how to set the layout to left to right?

       

      my list:

       

      <s:List id="ticketList"
                x="0" y="0" 
                dataProvider="{incidentModuleModel.quadrantTickets.getItemAt(quadrantNumber) as ArrayCollection}"
                contentBackgroundAlpha="0"          
                height="172"                    
                width="100%"
                minWidth="172">
           <s:layout>               
                <s:TileLayout id="tileLayout"                                               
                                 requestedRowCount="10"                                               
                                 horizontalGap="0"
                                 verticalGap="0"
                                 orientation="columns"  />
           </s:layout>
      </s:List>
      

       

       

      TileLayout_Problem.png

        • 1. Re: TileLayout left to right
          Shongrunden Adobe Employee

          If you set orientation="rows" instead of columns does that do what you want?


          • 2. Re: TileLayout left to right
            Manystems-Arjen Level 1

            Nope,

             

            When i set this to rows it puts the new squares at the bottom and not from left to right.

            • 3. Re: TileLayout left to right
              Flex harUI Adobe Employee

              When you set up for columns, the items are layed out like

               

              1

              2

              3

              4

               

              Not

               

              1 2 3 4

               

              And the number of rows should be dictated by tile size and the control's

              size.

              • 4. Re: TileLayout left to right
                Shongrunden Adobe Employee

                I don't think I understand what you mean by "When i set this to rows it puts the new squares at the bottom and not from left to right."  This sample application demonstrates using orientation="rows" and it looks like the new squares are being added from left to right.  The number of rows is always 10, and as you fill the available spaces a new column is created and all of the items are repositioned based on the new width.

                 

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                               xmlns:s="library://ns.adobe.com/flex/spark">
                    <fx:Script>
                        <![CDATA[
                            import mx.collections.ArrayList;
                            private var i:int = 0;
                            private function getDP(n:int):ArrayList {
                                var arr:Array = new Array(n);
                                for (i = 0; i < n; i++)
                                    arr[i] = i;
                               
                                return new ArrayList(arr);
                            }

                        ]]>
                    </fx:Script>
                  
                    <s:controlBarContent>
                        <s:Button label="add item" click="ticketList.dataProvider.addItem(i++)"/>
                    </s:controlBarContent>
                   
                    <s:List id="ticketList" dataProvider="{getDP(83)}">
                        <s:layout>              
                            <s:TileLayout id="tileLayout"      
                                          requestedRowCount="10"
                                          columnAlign="justifyUsingWidth"
                                          rowAlign="justifyUsingHeight"
                                          horizontalAlign="justify"
                                          verticalAlign="justify"
                                          horizontalGap="1"
                                          verticalGap="1"
                                          columnWidth="50" rowHeight="50"
                                          orientation="rows" />
                        </s:layout>
                        <s:itemRenderer>
                            <fx:Component>
                                <s:ItemRenderer>
                                    <s:Rect width="100%" height="100%">
                                        <s:fill><s:SolidColor color="0xAAAAFF" /></s:fill>
                                    </s:Rect>
                                    <s:Label text="{data}" horizontalCenter="0" verticalCenter="0" />
                                </s:ItemRenderer>
                            </fx:Component>
                        </s:itemRenderer>
                    </s:List>
                   
                </s:Application>
                1 person found this helpful
                • 5. Re: TileLayout left to right
                  Manystems-Arjen Level 1

                  Your sample application indeeds puts the items from left to right.

                  I think what i'm trying to do is not possible with the default tilelayout.

                   

                  The grid i'm trying to make is a grid default of 10x10 and the items should be filled from left to right.

                  When there are more than 100 items the grid should become 10(h)x11(w) and again be filled left to right.

                   

                  Your sample application did help me understand the layout a little bit more, thanks for that.

                  • 6. Re: TileLayout left to right
                    Shongrunden Adobe Employee

                    Sounds like you might want to look into creating a custom layout.  Evtim's blog has lots of good information on that, for example: http://evtimmy.com/2009/06/flowlayout-a-spark-custom-layout-example/

                    • 7. Re: TileLayout left to right
                      Manystems-Arjen Level 1

                      Thanks,

                       

                      This article is exactly what i'm looking for.