2 Replies Latest reply on May 18, 2009 3:30 PM by Flex harUI

    Help with checkbox column layout

    johnnymurphy
      Here is the what I need to accomplish:
      I need to display a long list(50-200) of checkboxes w/ labels in a multi column format.  They need to be sorted alphabetically downward and accross all columns. If scrolling is needed, then it should only scroll vertically.  Something like the image below.

      What I have tried was to use a TileList with a checkbox itemRenderer.  It works great for 1 column and scrolls vertically just fine.  It works great for 3 columns, however when it scrolls it scrolls horizontally and I need it to scroll vertically.  I have attached my code.
      One thing I have noticed is when you set 'direction = vertical' for a TileList the list sorts vertically but scrolls horizontally.  If you leave it as default (direction = horizontal), then it sorts horizontally, but scrolls vertically.  I need it to sort vertically and scroll vertically.  I have tried setting the VerticallyScollPolicy and HorizontalScrollPolicy but that just cut off the data instead of changing the scroll direction.
      I guess my second question is if this functionality is impossible with a TileList then what component would be a better option.
      Thanks in advance for taking the time to answer my questions.


      checkboxlist.jpg



      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                      xmlns:csc="com.facl.uaf.common.shared.widget.*"
                      layout="vertical"
                      verticalAlign="top"
                      horizontalAlign="center"
                      backgroundGradientColors="[0x000000,0x323232]"
                      paddingTop="20"
                      paddingBottom="20">

       

          <mx:ArrayCollection id="collection">
              <mx:Object label="Alameda"/>
              <mx:Object label="Alpine"/>
              <mx:Object label="Amador"/>
              <mx:Object label="Butte"/>
              <mx:Object label="Calaveras"/>
              <mx:Object label="Del Norte"/>
              <mx:Object label="El Dorado"/>
              <mx:Object label="Fresno"/>
              <mx:Object label="Kern"/>
              <mx:Object label="Los Angeles"/>
              <mx:Object label="Orange"/>
              <mx:Object label="Placer"/>
              <mx:Object label="Plumas"/>
              <mx:Object label="Riverside"/>
              <mx:Object label="Sacramento"/>
              <mx:Object label="San Diego"/>
              <mx:Object label="San Francisco"/>
              <mx:Object label="Santa Barbara"/>
              <mx:Object label="Santa Clara"/>
              <mx:Object label="Santa Cruz"/>
          </mx:ArrayCollection>

       

          <mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml"
                       color="#323232"
                       textAlign="left"
                       paddingLeft="20"
                       itemRenderer="mx.controls.CheckBox"
                       verticalScrollPolicy="auto"
                       themeColor="#FFFFFF"
                       dataProvider="{collection}"
                       columnCount="3"
                       width="500"
                       height="100"
                       direction="vertical">
          </mx:TileList>

       

      </mx:Application>
        • 1. Re: Help with checkbox column layout
          Gregory Lafrance Level 6

          Seems to me you need multiple List controls in an HBox, in this case three List controls. That way you can get the desired behavior.

           

          You may need to create three dataProviders.

          • 2. Re: Help with checkbox column layout
            Flex harUI Adobe Employee

            A List class like TileList does a couple of important things.  It only creates enough renderers to fill the viewable portion so you don't end up allocating tons of memory for 1000's of data items, and it has a selection model where you can select one or more data items and it draws a rollover and selection colored backgrounds over the entire renderer.

             

            Do you need that?  If not, a VBox with 3 HBoxes with 1/3 of the checkboxes in each HBox is all you need.  You can use a Repeater to generate the checkboxes or just add them in a loop.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

            Blog: http://blogs.adobe.com/aharui