Flex Examples » List http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Disabling item highlight indicator in the MX List control in Flex 3 http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/#comments Fri, 18 Jun 2010 17:54:35 +0000 Peter deHaan http://blog.flexexamples.com/?p=3167 In a previous example, “Disabling item roll over highlighting in the Flex DataGrid control”, we saw how you could disable the item roll over highlight in the MX DataGrid control in Flex by setting the Boolean useRollOver style.

The following example shows how you can disable the highlight indicator in the MX List control [...]]]> In a previous example, “Disabling item roll over highlighting in the Flex DataGrid control”, we saw how you could disable the item roll over highlight in the MX DataGrid control in Flex by setting the Boolean useRollOver style.

The following example shows how you can disable the highlight indicator in the MX List control in Flex 3 by subclassing the List control and overriding the protected drawHighlightIndicator() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ -->
<mx:Application name="MX_List_drawHighlightIndicator_test"
                xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:comps="comps.*"
                layout="vertical"
                verticalAlign="middle"
                backgroundColor="white">
 
    <comps:NoHighlightList id="lst"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            alternatingItemColors="[#FFFFFF,#EEEEEE]"
            textRollOverColor="red"
            rowCount="4" width="100" />
 
</mx:Application>

And the custom MX List control, comps/NoHighlightList.as, is as follows:

/** http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.List;
    import mx.controls.listClasses.IListItemRenderer;
 
    public class NoHighlightList extends List {
        public function NoHighlightList() {
            super();
        }
 
        override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
    }
}

Or, if you want to create the custom List control using MXML instead of ActionScript, you could do the following:

 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ -->
<mx:List name="NoHighlightListMXML"
        xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.IListItemRenderer;
 
            override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
                // ignore
            }
        ]]>
    </mx:Script>
 
</mx:List>
 
]]> http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/feed/ 2 Changing the mouse cursor when rolling over items in an MX List control in Flex http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/#comments Tue, 02 Feb 2010 01:56:46 +0000 Peter deHaan http://blog.flexexamples.com/?p=2363 The following example shows how you can change the mouse cursor when rolling over an item in an MX List control in Flex by listening for the itemRollOver and itemRollOut events and using the CursorManager.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ --> <mx:Application name="MX_List_itemRollOver_cursor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import mx.events.ListEvent;   [Embed("assets/accept.png")] [...]]]> The following example shows how you can change the mouse cursor when rolling over an item in an MX List control in Flex by listening for the itemRollOver and itemRollOut events and using the CursorManager.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public static const accept:Class;
 
            [Embed("assets/anchor.png")]
            public static const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    cursorManager.setCursor(dat.curses);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void {
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            width="200"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="Accept cursor" curses="{accept}" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>

Or, if you didn’t want to use data binding in the data provider, you could set a simple string to an embedded image, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import flash.utils.getDefinitionByName;
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public const accept:Class;
 
            [Embed("assets/anchor.png")]
            public const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    var cursorClass:Class = this[dat.curses] as Class;
                    cursorManager.setCursor(cursorClass);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void{
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="Accept cursor" curses="accept" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/feed/ 0 Using a CFF embedded font with a Halo List control in Flex 4 http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/ http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/#comments Tue, 17 Nov 2009 21:55:19 +0000 Peter deHaan http://blog.flexexamples.com/?p=2213 The following example shows how you can use a CFF/DefineFont4 embedded font with a Halo/MX List control in Flex 4 by setting the textFieldClass style to the new mx.core.UIFTETextField class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/ --> <s:Application name="Halo_List_textFieldClass_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <s:Label id="sdkVer" fontFamily="df4ster" fontSize="24" initialize="sdkVer.text = mx_internal::VERSION;" [...]]]> The following example shows how you can use a CFF/DefineFont4 embedded font with a Halo/MX List control in Flex 4 by setting the textFieldClass style to the new mx.core.UIFTETextField class.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/ -->
<s:Application name="Halo_List_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Label id="sdkVer"
                fontFamily="df4ster"
                fontSize="24"
                initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        @font-face {
            src: url("C:/Windows/Fonts/Arial.ttf");
            embedAsCFF: true;
            fontFamily: df4ster;
        }
 
        mx|List {
            color: red;
            fontFamily: df4ster;
            fontSize: 16;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
    </fx:Style>
 
    <mx:List id="lst"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList>
                <fx:Object label="Button" icon="@Embed('assets/Button.png')" />
                <fx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" />
                <fx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" />
                <fx:Object label="DataGroup" icon="@Embed('assets/DataGroup.png')" />
                <fx:Object label="HGroup" icon="@Embed('assets/HGroup.png')" />
                <fx:Object label="HScrollBar" icon="@Embed('assets/HScrollBar.png')" />
                <fx:Object label="HSlider" icon="@Embed('assets/HSlider.png')" />
                <fx:Object label="Label" icon="@Embed('assets/Label.png')" />
                <fx:Object label="List" icon="@Embed('assets/List.png')" />
            </mx:ArrayList>
        </mx:dataProvider>
    </mx:List>
 
</s:Application>

Or you can set the textFieldClass style on the mx|ListItemRenderer selector, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/ -->
<s:Application name="Halo_List_textFieldClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Label id="sdkVer"
                fontFamily="df4ster"
                fontSize="24"
                initialize="sdkVer.text = mx_internal::VERSION;" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        @font-face {
            src: url("C:/Windows/Fonts/Arial.ttf");
            embedAsCFF: true;
            fontFamily: df4ster;
        }
 
        mx|ListItemRenderer {
            color: red;
            fontFamily: df4ster;
            fontSize: 16;
            textFieldClass: ClassReference("mx.core.UIFTETextField");
        }
    </fx:Style>
 
    <mx:List id="lst"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <mx:dataProvider>
            <mx:ArrayList>
                <fx:Object label="Button" icon="@Embed('assets/Button.png')" />
                <fx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" />
                <fx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" />
                <fx:Object label="DataGroup" icon="@Embed('assets/DataGroup.png')" />
                <fx:Object label="HGroup" icon="@Embed('assets/HGroup.png')" />
                <fx:Object label="HScrollBar" icon="@Embed('assets/HScrollBar.png')" />
                <fx:Object label="HSlider" icon="@Embed('assets/HSlider.png')" />
                <fx:Object label="Label" icon="@Embed('assets/Label.png')" />
                <fx:Object label="List" icon="@Embed('assets/List.png')" />
            </mx:ArrayList>
        </mx:dataProvider>
    </mx:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/11/17/using-a-cff-embedded-font-with-a-halo-list-control-in-flex-4/feed/ 0 Removing the border skin on a List control in Flex http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/#comments Tue, 03 Feb 2009 07:58:37 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ The following example shows how you can remove the border skin on a Flex List control by setting the borderSkin style to null using MXML, CSS, and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ --> <mx:Application name="List_borderSkin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:List id="list" dataProvider="[Red,Orange,Yellow,Green,Blue]" borderSkin="{null}" width="100" [...]]]> The following example shows how you can remove the border skin on a Flex List control by setting the borderSkin style to null using MXML, CSS, and ActionScript.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            borderSkin="{null}"
            width="100" />

</mx:Application>

You can also set the borderSkin style in an external .CSS file or <Style> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        List {
            borderSkin: ClassReference(null);
        }
    </mx:Style>

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            width="100" />

</mx:Application>

Or, you can set the borderSkin style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/ -->
<mx:Application name="List_borderSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                list.setStyle("borderSkin", null);
            }
        ]]>
    </mx:Script>

    <mx:List id="list"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            width="100"
            initialize="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/02/02/removing-the-border-skin-on-a-list-control-in-flex/feed/ 6 Toggling item roll over highlighting on a List control in Flex http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/ http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/#comments Sun, 21 Sep 2008 04:34:31 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/ The following example shows how you can toggle item roll over highlighting on a Flex List control by setting the useRollOver style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/ --> <mx:Application name="List_useRollOver_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="Button" icon="@Embed('assets/Button.png')" /> <mx:Object label="ButtonBar" icon="@Embed('assets/ButtonBar.png')" /> <mx:Object label="CheckBox" icon="@Embed('assets/CheckBox.png')" /> <mx:Object [...]]]> The following example shows how you can toggle item roll over highlighting on a Flex List control by setting the useRollOver style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/ -->
<mx:Application name="List_useRollOver_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="Button"
                icon="@Embed('assets/Button.png')" />
        <mx:Object label="ButtonBar"
                icon="@Embed('assets/ButtonBar.png')" />
        <mx:Object label="CheckBox"
                icon="@Embed('assets/CheckBox.png')" />
        <mx:Object label="ColorPicker"
                icon="@Embed('assets/ColorPicker.png')" />
        <mx:Object label="ComboBox"
                icon="@Embed('assets/ComboBox.png')" />
        <mx:Object label="DataGrid"
                icon="@Embed('assets/DataGrid.png')" />
        <mx:Object label="DateChooser"
                icon="@Embed('assets/DateChooser.png')" />
        <mx:Object label="DateField"
                icon="@Embed('assets/DateField.png')" />
        <mx:Object label="HorizontalList"
                icon="@Embed('assets/HorizontalList.png')" />
        <mx:Object label="HRule"
                icon="@Embed('assets/HRule.png')" />
        <mx:Object label="HScrollBar"
                icon="@Embed('assets/HScrollBar.png')" />
        <mx:Object label="HSlider"
                icon="@Embed('assets/HSlider.png')" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="useRollOver:">
                <mx:CheckBox id="checkBox" selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            useRollOver="{checkBox.selected}"
            verticalScrollPolicy="on"
            width="150" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/20/toggling-item-roll-over-highlighting-on-a-list-control-in-flex/feed/ 0 Setting the item selection duration on a List control in Flex http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/#comments Thu, 31 Jul 2008 04:54:53 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ The following example shows how you can set the item selection duration on a Flex List control by setting the selectionDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object [...]]]> The following example shows how you can set the item selection duration on a Flex List control by setting the selectionDuration style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" indicatorGap="0">
            <mx:FormItem label="selectionDuration:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="2000"
                        value="250"
                        snapInterval="1"
                        tickInterval="100"
                        dataTipPrecision="0"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            selectionDuration="{slider.value}"
            width="200"
            selectionColor="red" />

</mx:Application>

You can also set the selectionDuration style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        List {
            selectionColor: red;
            selectionDuration: 1500;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:List id="list"
            dataProvider="{arr}"
            width="200" />

</mx:Application>

You can also set the selectionDuration style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                list.setStyle("selectionDuration", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" indicatorGap="0">
            <mx:FormItem label="selectionDuration:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="2000"
                        value="250"
                        snapInterval="1"
                        tickInterval="100"
                        dataTipPrecision="0"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            width="200"
            selectionColor="red" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.controls.List;
            import mx.controls.sliderClasses.Slider;
            import mx.events.SliderEvent;

            private var arr:Array;
            private var slider:HSlider;
            private var list:List;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});

                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 2000;
                slider.value = 250;
                slider.snapInterval = 1;
                slider.tickInterval = 100;
                slider.liveDragging = true;
                slider.setStyle("dataTipPrecision", 0);
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "selectionDuration:";
                formItem.addChild(slider);

                var form:Form = new Form();
                form.styleName = "plain";
                form.setStyle("indicatorGap", 0);
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                Application.application.addChildAt(appControlBar, 0);

                list = new List();
                list.dataProvider = arr;
                list.width = 200;
                list.setStyle("selectionColor", "red");
                addChild(list);
            }

            private function slider_change(evt:SliderEvent):void {
                list.setStyle("selectionDuration", evt.value);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/30/setting-the-item-selection-duration-on-a-list-control-in-flex/feed/ 0 Setting an effect when the items in a data provider change on a List control in Flex http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/#comments Wed, 30 Jul 2008 06:58:45 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ The following example shows how you can add a data effect when the items in a data provider change in a Flex List control by setting the itemsChangeEffect effect style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ private function [...]]]> The following example shows how you can add a data effect when the items in a data provider change in a Flex List control by setting the itemsChangeEffect effect style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:DefaultListEffect id="defaultListEffect" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            itemsChangeEffect="{defaultListEffect}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

View source is enabled in the following example.

You can also set the itemsChangeEffect effect in an external .CSS file or <mx:Style /> block, as seen in the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        List {
            itemsChangeEffect: ClassReference("mx.effects.DefaultTileListEffect");
        }
    </mx:Style>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200" />

</mx:Application>

Or, you can set the itemsChangeEffect effect using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.effects.DefaultListEffect;

            private function init():void {
                list.setStyle("itemsChangeEffect", DefaultListEffect);
            }

            private function addItemToDataProvider():void {
                var obj:Object = {label:new Date().toTimeString()};
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.addItemAt(obj, idx);
            }

            private function removeItemFromDataProvider():void {
                if (arrColl.length == 0) {
                    return;
                }
                var idx:int = Math.max(list.selectedIndex, 0);
                list.scrollToIndex(idx);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Add item"
                click="addItemToDataProvider();" />
        <mx:Button label="Delete item"
                click="removeItemFromDataProvider();" />
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arrColl}"
            variableRowHeight="true"
            width="200"
            initialize="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/29/setting-an-effect-when-the-items-in-a-data-provider-change-on-a-list-control-in-flex/feed/ 12 Setting the label color of a selected item on a List control in Flex http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/#comments Tue, 29 Jul 2008 06:21:46 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ The following example shows how you can set the label color for a selected item in a Flex List control by setting the textSelectedColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object [...]]]> The following example shows how you can set the label color for a selected item in a Flex List control by setting the textSelectedColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textSelectedColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            textSelectedColor="{colorPicker.selectedColor}"
            width="100" />

</mx:Application>

View source is enabled in the following example.

You can also set the textSelectedColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        List {
            textSelectedColor: red;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:List id="list"
            dataProvider="{arr}"
            width="100" />

</mx:Application>

Or, you can set the textSelectedColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                list.setStyle("textSelectedColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textSelectedColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            width="100" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/28/setting-the-label-color-of-a-selected-item-on-a-list-control-in-flex/feed/ 0 Toggling a drop shadow on the List control in Flex http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/#comments Wed, 23 Jul 2008 06:09:34 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ The following example shows how you can toggle a drop shadow on a Flex List control by setting the dropShadowEnabled style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" [...]]]> The following example shows how you can toggle a drop shadow on a Flex List control by setting the dropShadowEnabled style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dropShadowEnabled:">
                <mx:CheckBox id="checkBox" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            dropShadowEnabled="{checkBox.selected}"
            width="100" />

</mx:Application>

View source is enabled in the following example.

You can also set the dropShadowEnabled style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        List {
            dropShadowEnabled: true;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:List id="list"
            dataProvider="{arr}"
            width="100" />

</mx:Application>

Or, you can set the dropShadowEnabled style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                list.setStyle("dropShadowEnabled", checkBox.selected);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dropShadowEnabled:">
                <mx:CheckBox id="checkBox"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            width="100" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/22/toggling-a-drop-shadow-on-the-list-control-in-flex/feed/ 0 Setting the label color on a disabled List control in Flex http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/ http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/#comments Tue, 22 Jul 2008 06:54:49 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/ In a previous example, “Changing the background color of a disabled List control in Flex”, we saw how you could customize the background color of a disabled Flex List control by setting the backgroundDisabledColor style.

The following example shows how you can set the label color on a disabled Flex ComboBox control by setting [...]]]> In a previous example, “Changing the background color of a disabled List control in Flex”, we saw how you could customize the background color of a disabled Flex List control by setting the backgroundDisabledColor style.

The following example shows how you can set the label color on a disabled Flex ComboBox control by setting the disabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#999999" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            enabled="{checkBox.selected}"
            disabledColor="{colorPicker.selectedColor}"
            width="100" />

</mx:Application>

View source is enabled in the following example.

You can also set the disabledColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        List {
            disabledColor: red;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            enabled="{checkBox.selected}"
            width="100" />

</mx:Application>

Or, you can set the disabledColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                list.setStyle("disabledColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#999999"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:List id="list"
            dataProvider="{arr}"
            enabled="{checkBox.selected}"
            width="100" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/21/setting-the-label-color-on-a-disabled-list-control-in-flex/feed/ 0