ExtJs 5: Combobox with memory store not display data

1
votes

In my project I have a memory store with local data for a combobox. I insert the data via store.loadData() but also tried store.loadRawData(). The data is in the store, but when I assign it to a combobox, no selection of items is possible. The combobox is empty.

For example I have the following data

var data = [
    {
        name: 'Tom',
        age: 20
    },
    {
        name: 'Peter',
        age: 30
    }
];

I configer the store with a memory proxy and fields.

var store = Ext.create('Ext.data.Store', {
    fields: [
        'name',
        'age'
    ],
    proxy: {
        type: 'memory',
        reader: {
            type: 'json'
        }
    }
});

Somwhere in my application I load the data into it with

store.loadRawData(data, false);

Then I assign the store to a combobox, but no selection is possible.

var combobox = Ext.create('Ext.form.field.ComboBox', {
    queryMode: 'local',
    typeAhead: true,
    forceSelection: true,
    valueField: 'name',
    store: store
});

But when I iterate over the data of the store and log it to console, every data row is in there. 

store.each(function(record){
    console.log('name in store: %s', record.get('name'));
});

// In console:
// name in store: Tom
// name in store: Peter

I use ExtJs 5.0.1 and a fiddle can be found at Sencha Fiddle.

What am I missing here?
Thank you for every suggestion and hint.

2
javascriptextjscomboboxextjs5

2 Answers

2
votes

You only issue is missing the displayField property of the combobox.

Ext.onReady(function() {
    var data = [{
        name: 'Tom',
        age: 20
    }, {
        name: 'Peter',
        age: 30
    }];

    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'age'],
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        }
    });

    // loadRawData happens at an other place in the application
    // only here for the example
    store.loadRawData(data, false);

    // data is loaded successfully into store
    store.each(function(record) {
        console.log('name in store: %s', record.get('name'));
    });

    // combobox is empty...
    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        typeAhead: true,
        forceSelection: true,
        displayField: 'name', // <-- Add this 
        valueField: 'name',
        renderTo: Ext.getBody(),
        store: store
    });
});

Demo: https://fiddle.sencha.com/#fiddle/gbd

1
votes

You could just use inline data for this:

Ext.onReady(function() {
    var data = [{
        name: 'Tom',
        age: 20
    }, {
        name: 'Peter',
        age: 30
    }];

    var store = Ext.create('Ext.data.Store', {
        fields: ['name', 'age'],
        data: data
    });

    // data is loaded successfully into store
    store.each(function(record) {
        console.log('name in store: %s', record.get('name'));
    });

    // combobox is empty...
    var combobox = Ext.create('Ext.form.field.ComboBox', {
        queryMode: 'local',
        typeAhead: true,
        forceSelection: true,
        valueField: 'name',
        renderTo: Ext.getBody(),
        store: store
    });
});

In the code you are using you specified a Json reader but the data in the data variable was not a JSON string. If you wanted to use JSON you should have done it like this:

{
    "rows": [
        {
            "name": "Tom",
            "age": 20
        },
        {
            "name": "Peter",
            "age": 30
        }
    ]
}