Extending DropDownList to include an extra option

I want to extend DropDownList control to include an option for creating or editing the options. For example; for a list of projects in the dropdown list, there will be another option that says "Create new project..." or "Edit projects..." and this will be the last option in the list. When user selects this option, the selectedIndex or selectedItem will not change and corresponding action will be taken (for example a popup window shows up). This will be a convenient way for the end user.

Now I want this to work independent of the context and the class must be reusable. User will only specify the optionText and optionFunction to work this out. The basic structure of the class looks like this:

public class OptiveDropDownList extends DropDownList
{
    private var _enableOption:Boolean;
    private var _optionText:String;
    private var _originalDataProvider:IList;
    [Bindable] public var optionFunction:Function;

    public function OptiveDro开发者_StackOverflowpDownList()
    {
        super();
    }

    public function set optionText(value:String):void
    {
        _optionText = value;
        dataProvider = _originalDataProvider;
    }

    public function set enableOption(value:Boolean):void
    {
        _enableOption = value;
        dataProvider = _originalDataProvider;
    }

    public override function set dataProvider(value:IList):void
    {
        _originalDataProvider = value;
        var dp:IList = null;
        if(!value){
            dp=new ArrayCollection(value.toArray());
            if(_enableOption){
                var opt:Object=new Object();
                opt[labelField]=_optionText;
                dp.addItem(opt);
            }
        }
        super.dataProvider = dp;
    }

    [Bindable]
    public override function get dataProvider():IList
    {
        return _originalDataProvider;
    }
}

I hope my code is clear to understand, I am adding an extra object to the dataprovider for the option. Field names are self-explanatory.

Now my question is how to know whether the dataprovider's items have changed? Which functions should I override and how to do it. I have tried using a ChangeWatcher to watch the length property of the dataprovider, but it doesnt work if only an object in the dataprovider has changed. I need to capture these changes and update the view.

I also need to capture the selection and call optionFunction, preventing the default action not to give index out of bounds error.

Thanks in advance.

Just add an event listener to the original dataProvider. All implementations of IList should dispatch CollectionEvent.COLLECTION_CHANGE when the the list changes (e.g. add, remove or when an existing object in the list has been changed). In your event handler you can update the DropDownList's dataProvider accordingly.

By overriding the mx_internal method setSelectedIndex() you can adjust the selection according to your wishes. Take a look at the blog post "Disable selection on some items in a spark List" for some inspiration.