Extjs how to remove and undo list items from extjs combo box

Question

I added the close icon to the combo box list items clicking on the cloes icon it show undo at the place of close icon for 3 seconds. After 3 seconds the list item should delete from the list. if usesr click on the undo it should not delete. here with i am attaching the code :

Ext.define('ezdi.view.SaveSearchComboboxView', {
    extend : 'Ext.form.field.ComboBox',
    alias : 'widget.saveSearchComboboxAlias',
    queryMode : 'local',
    id : 'saveSearchComboId',
    store : 'SaveSearchComboboxStore',
    emptyText : 'Saved Searches',
    displayField : 'searchQueryName',
    valueField : 'searchQueryId',
    lazyInit: false,
    listeners : {
        focus : function (combo) {
            combo.expand();
        }

    },
    listConfig : {
        getInnerTpl : function (displayField) {
            return '<span style="float:right;"><button width:16px height:16px; class="savedSearchRemove">x</button><button width:16px height:16px; style="display:none;" class="undoSearchRemove">Undo</button></span>{' + displayField + '}';
        }
    }

}); 

For better understanding i have attached clip here

Answer 1

1. To remove an item from a dropdown you simply remove the corresponding record from the store configured on the combobox.
2. To delay execution of a task you can try a few different options. The easier one might be just the buffer option on the listener. The other is a delayed task runner. http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.util.DelayedTask .
3. To setup a listener from the combobox unto a subelement like a span in your case, you can use the delegate option on the listener config.