iam using Ext.form.combobox to perform an autocomplete search, my data is stored in array store :ext.data.arraystore, actually the data in the array store is loaded via an ajax request, here is my arraystore code:
var ds = new Ext.data.ArrayStore({
fields: ['description','lat','lng'],
data: xmlarray
});
where xmlarray is a data array which is loaded from php server using ajax request
here is my combobox code:
var timePanel = {
xtype: 'panel',
border: false,
width: 600,
bodyPadding: 10,
layout: 'anchor',
items: [{
xtype:'combo' ,
displayField:'displayValue',
valueField: 'id',
store: ds,
mode: 'local',
typeAhead: true,
triggerAction: 'all',
hideTrigger:false,
lazyRender: true,
emptyText: 'select a city',
forceSelection: false,
typeAhead: true,
selectOnFocus: true,
enableKeyEvents:true,
listConfig: {
loadingText: 'Searching...',
emptyText: 'No matching posts found.',
// Custom rendering template for each item
getInnerTpl: function() {
return '<div class="search-item">' +
'<h3><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by {author}</span>{title}</h3>' +
'{excerpt}' +
'</div>';
}
},
pageSize: 10,
//listeners: {select: this.GeocoderRequest};
}
]
};
my main problem is that the combobox shows me the a set of empty selection rows, while each selection row should show a name from my data but its empty instead..is there any problem in my arrastore or in combobox configurations ?