EXTJS 5 Load the VERY SIMPLE string array into the repository

Question

I have a back end service that gives me an object that contains only an array of strings. This, for example, is 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 the first problem arises: 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 combos using this store, I also don’t know what I should write:

 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 https://fiddle.sencha.com/#fiddle/iau link to the sencha fiddle with the code described below! Many thanks!

Answer 1

In your script, you used ArrayStore , which is not intended for this purpose, but rather a two-dimensional array in a dataset in which the model does not exist. Note that I used a regular store in the following example.

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

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

To get around this in the interface, you can apply transform to the reader configuration, which allows you to manipulate a raw data object before it is processed by any other components. For instance:

 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; } } } }); 

Thus, you have a clear field called name , which you can use to configure both displayField and valueField in your combo box.

& raquo; violin