0
votes

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 ?

1

1 Answers

1
votes
fields: ['description','lat','lng'],

...

displayField:'displayValue',
valueField: 'id',

There is no field named displayValue in the store, therefore combobox can't find values it is looking for. Same goes for valueField.