Reading a single- array into a store

Question

My store:

Ext.define('MyApp.store.NameStore',{
    extend: 'Ext.data.Store',
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            proxy:{
                type:'ajax',
                url:'../api/AdminPanel/GetNames',
                reader:{
                    type:'json',
                    rootProperty:'data'
                }
            },
            fields:[{
                name:'name',
                calculate:function(data) {
                    var x = data;
                    return x.replace('<','&lt;').replace('>','&gt;');
                }
            }]
        },cfg)]);
    }
});

The data the store should take:

{"success":true,"data":["Axel Braun <axel.braun@contoso.com>","Andy Martin <amartin@contoso.com>","Charlotte Henrici <charlotte@contoso.com>"]}

I have tried to use the json reader and override "calculate" and/or "convert" function, but data is undefined. I have also tried to use an array reader, because it seems natural. But for the array reader, the name is str[0] ("A") and the id is str[1] ("x"), before I even get to the convert function at all.

So, how can I convert a one-dimensional array of strings into a store?

Answer 1

One way would be to override Reader.getData (in Ext 4) to convert your array of strings to be an array of objects.

Ext.define('MyApp.store.NameStore',{
    extend: 'Ext.data.Store',
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            proxy:{
                type:'ajax',
                url:'../api/AdminPanel/GetNames',
                reader:{
                    type:'json',
                    rootProperty:'data',
                    getData: function(data) {
                        return data.map(function(str) {
                            return {emailSpec: str};
                        });
                    }
                }
            },
            fields:[
                'emailSpec',
                {
                    name:'name',
                    calculate: function(data) {
                        return data.emailSpec.replace('<','&lt;').replace('>','&gt;');
                    }
                }
            ]
        },cfg)]);
    }
});

In later versions, this function is called transform, as noted by CD..

Ext.define('MyApp.store.NameStore',{
    extend: 'Ext.data.Store',
    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            proxy:{
                type:'ajax',
                url:'../api/AdminPanel/GetNames',
                reader:{
                    type:'json',
                    rootProperty:'data',
                    transform: function(data) {
                        return data.map(function(str) {
                            return {emailSpec: str};
                        });
                    }
                }
            },
            fields:[
                'emailSpec',
                {
                    name:'name',
                    convert: function(data) {
                        return data.emailSpec.replace('<','&lt;').replace('>','&gt;');
                    }
                }
            ]
        },cfg)]);
    }
});