Clearing selection in combobox

[galcott]

In a combobox that is populated from a URL, it seems that it's necessary for the editable property to be true for the user to be able to clear the selection. They then have to manually erase the selection. I would rather set editable to false and be able to just press the Del key in order to clear the selection. Is that possible?

[jarry]

Attach the 'clear' icon on the combobox component to clear the values.

Code:

$('#cb').combobox({
data: data,
valueField: 'id',
textField: 'text',
editable: false,
iconWidth: 22,
icons: [{
iconCls: 'icon-clear',
handler: function(){
$('#cb').combobox('clear')
}
}],
})

[galcott]

I don't really like using that icon. Is there a way to set a key handler for the delete key, or some other way to do it by keyboard?

[jarry]

Override the 'inputEvents' property to set the key handler for the combobox.

Code:

$('#cb').combobox({
data: data,
valueField: 'id',
textField: 'text',
editable: false,
inputEvents: $.extend({}, $.fn.combobox.defaults.inputEvents, {
keyup: function (e) {
if (e.which == 46) { // press Delete key
$('#cb').combobox('clear')
}
}
}),
})

[galcott]

OK, that works well. You should include complete documentation on extending the components with examples like this. The only place this type of code is included is in forum posts which makes it hard to find.