PDA

View Full Version : ComboBox that doesn't autoselect an item



zefciu
13 Oct 2009, 11:45 PM
Hello. I am trying to create a search field for my application. It should give some hints to the user, but generally should allow to enter anything he wants into it. I also want it to work when user presses enter key. I have come up with something like this:

var Ext;
Ext.ns('Ext.em.search');
Ext.em.search.SearchField = Ext.extend(Ext.Container, {
initComponent: function () {
this.store = new Ext.data.JsonStore({
root: 'data',
url: getRoot('searches/jsonGetList'),
fields: Ext.em.data.SimpleMapping('Search', ['id', 'pattern'])
});
this.combo = new Ext.form.ComboBox({
hideTrigger: true,
store: this.store,
width: 100,
typeAhead: false,
valueField: 'pattern',
displayField: 'pattern',
enableKeyEvents: true,
minChars: 0
});
this.combo.on('specialkey', function (combo, ev) {
if (ev.keyCode === ev.ENTER) {
this.onSearch();
}
}, this);
this.searchButton = new Ext.Button({
iconCls: 'icon-magnifier',
scope: this,
handler: this.onSearch
});
this.eraseButton = new Ext.Button({
iconCls: 'icon-erase',
scope: this,
handler: this.onErase

})
this.items = [this.combo, this.searchButton, this.eraseButton];
Ext.em.search.SearchField.superclass.initComponent.apply(this, arguments);
Ext.em.s = this; //DEBUG
},
onSearch: function () {
this.grid.store.setBaseParam('SEARCH', this.combo.getRawValue());
this.grid.store.reload();
},
onErase: function () {
this.combo.reset();
delete this.grid.store.baseParams['SEARCH'];
this.grid.store.reload();
},
layout: 'column'
});Still the behavior of this widget is a little undesirable. When user starts to write, the dropdown list with hints appears and one of the options is selected. If he hits enter, he would search for this option, not for the shorter text he wrote. In this case he must hit <Esc> to hide the dropdown and then enter. I don't want to explain that to the customers. Also sometimes it may happen that the dropdown appears just before he hits enter key. In this case the result is completely unpredictable for the user.

Now, how can I make enter send the rawValue alway when nothing was selected manually? Will a custom DataView do, or should I mess with event handlers?