Cannot disable combo selects first value - extjs

Question

I have a combo like below.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Label',
allowBlank: true,
maxLength: 50,
minChars: 10000,
name: 'txt',
id: 'txt',
store: states,
displayField: 'name',
selectOnFocus: false,
forceSelection: false,
typeAhead: false,
autoSelect: false,
queryMode: 'local',
triggerAction: 'all',
hideTrigger: true,
listeners: {
beforequery: function (record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = false;
},
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
doProcess();
}
}
},
renderTo: Ext.getBody()
});
My purpose to provide is building a textbox that remember history. I've searched and found this solution: You must use combo like textfield.
No problem so far.
But when I write something and select record from list that searched before, the next time combo selects it automatically while I write.
I'm not sure if I explained.
You can test it here: https://fiddle.sencha.com/#view/editor&fiddle/28tl
Regards.

Answer 1

You can set the trackOver boundlist config to false like so:
xtype: 'combo',
...
listConfig: {
trackOver: false
}
Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2945

Answer 2

Try with "tagfield". Check here

Answer 3

Hi I've solved my problem like below.
https://fiddle.sencha.com/#view/editor&fiddle/28tl
This example tells me more clear than my question.
Ext.application({
name: 'Fiddle',
launch: function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Label',
allowBlank: true,
maxLength: 50,
minChars: 10000,
name: 'txt',
id: 'txt',
store: states,
displayField: 'name',
selectOnFocus: false,
forceSelection: false,
typeAhead: false,
autoSelect: false,
queryMode: 'local',
triggerAction: 'all',
hideTrigger: true,
enableKeyEvents: true
,
listConfig: {
listeners: {
itemclick: function (list, record) {
_iseFareIleSecildi = true;
},
highlightitem: function (view, node, eOpts) {
_iseKlavyeIleSecildi = true;
}
}
},
listeners: {
beforequery: function (record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = false;
Ext.defer(function () {
secimiSifirla();
}, 30);
},
specialkey: function (f, e) {
if (e.getKey() == e.ENTER) {
console.log('action');
}
},
keyup: function (combo, e) {
if (e.getKey() == e.ENTER) {
console.log('action');
}
},
beforeselect: function (combo, record, index, eOpts) {
if (_iseFareIleSecildi) {
secimiSifirla();
return true;
} else {
if (_iseKlavyeIleSecildi) {
secimiSifirla();
return true;
} else {
return false;
}
}
}
},
renderTo: Ext.getBody()
});
}
});
var _iseFareIleSecildi = false;
var _iseKlavyeIleSecildi = false;
function secimiSifirla() {
_iseFareIleSecildi = false;
_iseKlavyeIleSecildi = false;
}
Regards.