4 Replies Latest reply on Jun 26, 2007 11:23 PM by Craig Grummitt

    lines to divide items on a list

    Craig Grummitt Level 3
      has anyone set up some a line divider between items in a list?

      i have attempted this with item renderers but the rollover colour always overlaps the line divider i set up. i want the rollover colour to stop neatly at the divider.

      thanks
      craig
        • 1. Re: lines to divide items on a list
          ntsiii Level 3
          How are you implementing this?

          Are you using the graphics class to draw the line? If so can you push the line further down/up?

          Tracy
          • 2. lines to divide items on a list
            Craig Grummitt Level 3
            You would think you would be able to move the line into the precise position between rows wouldn't you? but if i try to move the line down, and specify rowHeight for the list, the line doesn't display.
            i'm actually using a HRule to create the line rather than the graphics class.

            here's my code:

            ----------------------------------the application
            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
            <mx:List id="myList"
            height="180" width="300"
            itemRenderer="RendererState">
            <mx:dataProvider>
            <mx:Object label="Victoria" />
            <mx:Object label="New South Wales" />
            <mx:Object label="Queensland" />
            <mx:Object label="Tasmania"/>
            <mx:Object label="Northern Territory" />
            <mx:Object label="Western Australia" />
            <mx:Object label="South Australia" />
            <mx:Object label="A.C.T." />
            </mx:dataProvider>
            </mx:List>
            </mx:Application>

            -----------------------------the item renderer
            <?xml version="1.0"?>
            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" >
            <mx:Label id="State" text="State: {data.label}" height="22"/>
            <mx:HRule y="23" width="100%"/>
            </mx:Canvas>
            • 3. Re: lines to divide items on a list
              ntsiii Level 3
              The graphics class draws on top of everything. I'd give it a try.

              Tracy
              • 4. Re: lines to divide items on a list
                Craig Grummitt Level 3
                great tip thanks for that tracy. that did the trick.

                to my list i added:
                rowHeight="25"

                and i modified my itemRenderer code to:
                <?xml version="1.0"?>
                <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()">
                <mx:Label id="State" text="State: {data.label}" height="22"/>
                <mx:Script>
                <![CDATA[
                private function init():void {
                this.graphics.lineStyle(1,0x000000);
                this.graphics.moveTo(0,23);
                this.graphics.lineTo(this.width,23);
                }
                ]]>
                </mx:Script>
                </mx:Canvas>