Formatting scroll tips on a ComboBox control in Flex

In a previous example, “Displaying scroll tips on a ComboBox control in Flex”, we saw you can toggle scroll tips on a Flex ComboBox control’s dropdown menu by setting the showScrollTips and dropdown properties.

The following example shows you how you can format the scroll tip on a Flex ComboBox control by setting the scrollTipFunction 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/formatting-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[
            import mx.events.DropdownEvent;

            private function comboBox_open(evt:DropdownEvent):void {
                comboBox.dropdown.showScrollTips = checkBox.selected;
                comboBox.dropdown.scrollTipFunction = comboBox_dropdown_scrollTipFunc;
            }

            private function comboBox_dropdown_scrollTipFunc(dir:String, pos:uint):String {
                return pos + " of " + comboBox.dropdown.maxVerticalScrollPosition;
            }
        ]]>
    </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"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            open="comboBox_open(event);" />

</mx:Application>

View source is enabled in the following example.

5 thoughts on “Formatting scroll tips on a ComboBox control in Flex

  1. John,

    Yeah, we encountered the same issue on the previous example too, “Displaying scroll tips on a ComboBox control in Flex”.

    It seems the dropdown menu gets destroyed after you select an item from the ComboBox. The solution/workaround was to set the showScrollTips and scrollTipFunction each time the ComboBox control is opened rather than just once when the ComboBox is created. I’ll update the example.

    Thanks,
    Peter

  2. Sorry Peter, I was just clicking rather than scrolling. I have now implemented what I need by adding getItemAt info
    Your site is a treasure box. Thanks so much for your efforts

Comments are closed.