Flex ComboBox subclass with "Null" / "All" option?

Question

Just wondering if anybody knows of an existing component that subclasses ComboBox but lets you specify an item in the list with a label like "all" or "none" that will set selectedItem to null? I've looked into writing one, and due to the internals of the component it looks like a lot of work, so I'm wondering if somebody's already done it?

Answer 1

What would a ComboBox look like when no item is selected? Or all items selected for that matter? It sounds like you should use a List instead of a ComboBox. Look at the list controls on Tour de Flex.

Answer 2

How about something like this.

Answer 3

Run this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%" creationComplete="onCreationComplete()">
    <mx:Script>
     <![CDATA[
      private var myData:Array = new Array();

      [Bindable]
      private var comboData:Array = new Array();

      [Bindable]
      private var selectedData:String = "";

      private function onCreationComplete():void
      {
       myData.push({"label" : "First", "value" : "First"});
       myData.push({"label" : "Second", "value" : "Second"});
       myData.push({"label" : "Third", "value" : "Third"});

       comboData.push({"label" : "<None>", "value" : "<None>"});
       comboData.push({"label" : "<All>", "value" : "<All>"});
       for(var i:int = 0; i < myData.length; i++) {
        comboData.push(myData[i]);
       }
      }

      private function onSmartComboBoxChange():void
      {
       if(smartComboBox.selectedItem) {
        if(smartComboBox.selectedItem.value == "<None>") {
         selectedData = "";
        } else if(smartComboBox.selectedItem.value == "<All>") {
         selectedData = "";
         for(var i:int = 0; i < myData.length; i++) {
          selectedData += myData[i].value + ", ";
         }
        } else {
         selectedData = comboData[smartComboBox.selectedIndex].value;
        }
       }
      }
     ]]>
    </mx:Script>
    <mx:VBox>
     <mx:ComboBox id="smartComboBox" dataProvider="{comboData}" change="onSmartComboBoxChange()" labelField="label" />
     <mx:Label id="selectedDataLabel" text="{selectedData}" />
    </mx:VBox>
</mx:Application>