CODEWITHSUNDEEP
apache-flex
user_78361084
user_78361084

Reputation: 3918

how do I disable selection & rollover colors in a list?

How do I disable the rollover, selection & focus colors in a list? I tried setting them to "{null}" but that just makes them black:

<s:Application 
xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark"
width="100%" height="100%"
backgroundColor="white" 
>

<fx:Declarations>
    <s:ArrayCollection id="myArray">
        <fx:String>Item 0</fx:String>
        <fx:String>Item 1</fx:String>
        <fx:String>Item 2</fx:String>
        <fx:String>Item 3</fx:String>
        <fx:String>Item 4</fx:String>
    </s:ArrayCollection>
</fx:Declarations>

<s:VGroup horizontalAlign="center">

    <s:List dataProvider="{myArray}" width="200" height="200"
             focusColor="{null}" selectionColor="{null}"
             rollOverColor="{null}"
            >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:states>
                        <s:State name="normal"  />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                    </s:states>



                    <s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>

</s:VGroup>
</s:Application>

Upvotes: 5

Views: 8793

Answers (2)

JeffryHouser
JeffryHouser

Reputation: 39408

Try setting autoDrawBackground property in the itemRenderer to false. 

<s:itemRenderer >
            <fx:Component>
                <s:ItemRenderer autoDrawBackground="false">
                    <s:states>
                        <s:State name="normal"  />
                        <s:State name="hovered" />
                        <s:State name="selected" />
                    </s:states>

                    <s:Label text="{data}" width="100%" left="5" top="7" bottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>

Upvotes: 13

Shlomo Zalman Heigh
Shlomo Zalman Heigh

Reputation: 3978

Based on this I came up with this:

<s:itemRenderer>
<fx:Component>
    <s:ItemRenderer>
        <fx:Script>
        <![CDATA[
        override protected function get hovered():Boolean { return false; }
        override protected function get down():Boolean { return false; }
        override public function get selected():Boolean { return false; }
        override public function get showsCaret():Boolean { return false; }
        ]]>
        </fx:Script>
        <s:Label text="{data}" width="100%" />
    </s:ItemRenderer>
</fx:Component>
</s:itemRenderer>

It still allows for the alternatingItemColors style, and also disables the selected, hover, and down colors.

Upvotes: 2

Related Questions