Displaying scroll tips on a ComboBox control in Flex

The following example shows how you can toggle scroll tips on a Flex ComboBox control’s dropdown menu by setting the showScrollTips property on the ComboBox control’s dropdown property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/01/displaying-scroll-tips-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                checkBox.selected = comboBox.dropdown.showScrollTips;
            }

            private function checkBox_change(evt:Event):void {
                comboBox.dropdown.showScrollTips = 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="showScrollTips:">
                <mx:CheckBox id="checkBox"
                        change="checkBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            creationComplete="init();" />

</mx:Application>

View source is enabled in the following example.

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/01/displaying-scroll-tips-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ComboBox;
            import mx.controls.CheckBox;

            private var arr:Array;
            private var checkBox:CheckBox;
            private var comboBox:ComboBox;

            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"});

                checkBox = new CheckBox();
                checkBox.addEventListener(Event.CHANGE, checkBox_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "showScrollTips:";
                formItem.addChild(checkBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

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

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                addChild(comboBox);

                callLater(delayedInit);
            }

            private function delayedInit():void {
                checkBox.selected = comboBox.dropdown.showScrollTips;
            }

            private function checkBox_change(evt:Event):void {
                comboBox.dropdown.showScrollTips = checkBox.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>

0 thoughts on “Displaying scroll tips on a ComboBox control in Flex

  1. Klaus Busse,

    Good catch! I think it has to do with the dropdown being removed after the selection. The workaround seems to be setting the comboBox.dropdown.showScrollTips property using the ComboBox control’s open event, as seen in the following snippet:

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox.dropdown.showScrollTips = checkBox.selected;" />
    

    I’ll look into this a bit more tomorrow and file a bug/enhancement request.

    Peter