1 Reply Latest reply on Jun 9, 2010 4:07 AM by nishadmusthafa

    Styling lists/item renderers

    Olof Brickarp

      Hi,

       

      I've been using the Flash Builder 4 beta (SDK 10485) for some time and have a pretty good understanding of how styling components work. I've recently migrated a project to a retail copy of Flash Builder and have ran into a few problems regarding lists.

       

      1: I get hover, clicked and selected states on all lists, indicated by a light blue color. I've yet to figure out how to disable/style this correctly. In the beta I used to just add a custom item renderer but that don't seem to fix the problem anymore (if I want the hover state to be ie. 4 pixels from every corner the light blue shows behind it - see link at the bottom). Have I missed something here? Where are these colors located and how do I disable them?

       

      2: If I put lists inside of other lists (recommended in SDK 10485 instead of using repeaters) I can no longet scroll the "main" list with my mouse. This used to work in the beta and I have yet to find anything that disable this event, setting scroll policy doesnt seem to help. See example (try scrollong with the wheel over a list inside the main list)

       

      Quick example:

      http://www.yay.se/flex/list-styling/

       

      Many thanks in advance.

        • 1. Re: Styling lists/item renderers
          nishadmusthafa Level 2

          Hi,


          This what i managed to do. The outside list has a rollover colour of red and the inside one has one of green. (Scary choice of colours i admit, but it's just an example).

          Listprintscreen.JPG

          The itemrenderer code is shown below


          <?xml version="1.0" encoding="utf-8"?>
          <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                          xmlns:s="library://ns.adobe.com/flex/spark"
                          xmlns:mx="library://ns.adobe.com/flex/mx"
                          autoDrawBackground="true" rollOverColor="0xFF0000">
              <s:Rect height="75" width="100"/>
              <s:List width="200" height="100"  dataProvider="{data}" horizontalCenter="0" verticalCenter="0"
                      itemRenderer="spark.skins.spark.DefaultItemRenderer" rollOverColor="0X00ff00"/>
          </s:ItemRenderer>

           

          I was able to scroll both lists but only after clicking to focus. I'm not sure if this is what u are looking for. Do let me know.

           

          Nishad