Truncating labels in a Flex ComboBox dropdown menu using an item renderer

The following example shows how you can use a Label control as an item renderer in a Flex ComboBox control so that items which exceed the combo box dropdown menu’s width are truncated with a nice “…”.

Full code after the jump

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/22/truncating-labels-in-a-flex-combobox-dropdown-menu-using-an-item-renderer/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="width:" />
        <mx:HSlider id="slider"
                minimum="50"
                maximum="200"
                value="80"
                liveDragging="true"
                labels="[50,200]"
                tickInterval="50"
                snapInterval="10" />
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            width="{slider.value}"
            itemRenderer="mx.controls.Label">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object label="1234567890" />
                <mx:Object label="The quick brown fox" />
                <mx:Object label="Lorem ipsum" />
            </mx:Array>
        </mx:dataProvider>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: itemRenderer