EXTJS 5 Load a VERY SIMPLE string array in store

Question

I have a back end service that gives me an object which only contains an array of string. This is for example what the service gives me:

{  
  "DepartementsResult": [
    "AME-CM",
    "BMAU",
    "BMKR",
    "BNVS"
  ]
}

So to get this data I want to create a nice and simple store, but a first problem appear: what should be the field???

var store = Ext.create('Ext.data.Store', {
    fields: ['data'], // What should be the fields here, I have none ^^"
    pageSize: 0,
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'data.json', // this file contains the data described above
        reader: {
            type: 'json',
            rootProperty: 'DepartementsResult'
        }
    }
});

And then when I want to create a combo using this store I don't know what I should write also:

var combo = Ext.create('Ext.form.field.ComboBox', {
    store: store,
    displayField: 'data', // what field should be displayed ^^" ?
    valueField: 'data', // same here I don't really know what to write
    fieldLabel: 'Departements',
    renderTo: Ext.getBody()
});

Here is the link https://fiddle.sencha.com/#fiddle/iau to the sencha fiddle with the code described bellow ! Thanks a lot !!

Answer 1

In your fiddle you've used an ArrayStore which isn't intended for this purpose - rather a two-dimensional array in a data set whereby no model exists. Please note that I've used a regular store in the following example.

Regardless of whether you explicitly create a model for the data or not, a store will look for values against a key (field name) in an object. i.e. if you specified the fields name and description then it will look for an array of data structured as follows:

{
    name: 'Record Name',
    description: '...'
}

In order to work around this on the front-end you could apply a transform to the reader configuration which allows you to manipulate the raw data object before it is processed by any other components. For example:

var store = Ext.create('Ext.data.Store', {
    fields: ['name'],
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            rootProperty: 'GetDepartementsResult',
            transform: function(data){
                var key = this.getRootProperty();
                data[key] = data[key].map(function(val){
                    return { name: val };
                });
                return data;
            }
        }
    }
});

This way you have a clear field called name which you can use to configure both the displayField and the valueField on your combo box.

» fiddle