How to create Ext.data.Store from an unusual JSON store?

Question

I have this JSON store but it`s not coded correctly. What is the correct syntax for it?

Ext.define('MA.store.Language', {
extend : 'Ext.data.Store',
fields : [ {
    name : 'id'
}, {
    name : 'name'
} ],
data : [ {
    "aa" : "Afar",
    "ab" : "Abkhazian",
    "ace" : "Achinese",
    "ach" : "Acoli",
    "ada" : "Adangme",
    "ady" : "Adyghe",
    "ae" : "Avestan",
    "af" : "Afrikaans",
    "afa" : "Afro-Asiatic Language",
    "afh" : "Afrihili",
    "ain" : "Ainu",
    "ak" : "Akan"
} ]
});

I need this store for a combobox like this but it wont work:

{
xtype : 'combo',
name : 'language',
fieldLabel : 'Language',
store : 'Language',
queryMode : 'local',
displayField : 'name',
valueField : 'id',
typeAhead : true,
forceSelection : true
}

Zango · Answer 1 · 2011-07-18T08:23:47.247

Firstly, in your combobox configuration you must have: store : Ext.create('MA.store.Language'), instead of: store : 'Language',

And secondly, your store definition must look like this:

Ext.define('MA.store.Language', {
extend : 'Ext.data.Store',
fields : [ {
    name : 'id'
}, {
    name : 'name'
} ],
data : [ {
    "aa" : "Afar",
    "ab" : "Abkhazian",
    "ace" : "Achinese",
    "ach" : "Acoli",
    "ada" : "Adangme",
    "ady" : "Adyghe",
    "ae" : "Avestan",
    "af" : "Afrikaans",
    "afa" : "Afro-Asiatic Language",
    "afh" : "Afrihili",
    "ain" : "Ainu",
    "ak" : "Akan"
} ],

read : function() {
 var me = this; 
 var oldData = me.getProxy().data[0];
 var data = [];
 for (var prop in oldData) {
    if (oldData.hasOwnProperty(prop)) {
        data.push({
            id: prop,
            name: oldData[prop]
        });
    }
 } 
 me.loadData(data);
}

});

And it will work as you expect with your combobox.

EDIT: instead of this:

data.push({
    id: prop,
    name: oldData[prop]
  });

I had this:

data.push({
    id: prop,
    value: oldData[prop]
  });

I coppied and pasted your code to my js store but no data are shown unfortunately in my combobox. — Mehdi Fanai, Jul 18 '11 at 07:21
did you change store : 'Language' to store : Ext.create('MA.store.Language') in your combobox config? — Zango, Jul 18 '11 at 07:58
yes i did.Did you check it on your localhost? Is it working on your side? — Mehdi Fanai, Jul 18 '11 at 08:07

score 4 · Accepted Answer · edited Feb 08 '14 at 21:57

So you want to use your unusual JSON anyway. In this case you can solve your problem by defining your own reader. Like this:

Ext.define('MA.reader.Language', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.Language',
    read: function (response) {
        var data = [];
        for (var i in response[0])
            data.push({
                id: i,
                'name': response[0][i]
            });
        return this.callParent([data]);
    }
});

Ext.define('MA.store.Language', {
    extend: 'Ext.data.Store',
    fields: [{
        name: 'id'
    }, {
        name: 'name'
    }],
    data: [{
        "aa": "Afar",
        "ab": "Abkhazian",
        "ace": "Achinese",
        "ach": "Acoli",
        "ada": "Adangme",
        "ady": "Adyghe",
        "ae": "Avestan",
        "af": "Afrikaans",
        "afa": "Afro-Asiatic Language",
        "afh": "Afrihili",
        "ain": "Ainu",
        "ak": "Akan"

    }],
    proxy: {
        type: 'memory',
        reader: {
            type: 'Language'
        }
    }
});

var store = Ext.create('MA.store.Language', {
    storeId: 'Language'
});

var cc = Ext.widget('combo', {
    xtype: 'combo',
    name: 'language',
    fieldLabel: 'Language',
    store: 'Language',
    queryMode: 'local',
    displayField: 'name',
    valueField: 'id',
    typeAhead: true,
    forceSelection: true
});

cc.render(Ext.getBody());

EDIT: working example

Molecular Man · Answer 3 · 2013-01-17T20:27:07.313

2

For your example you have to modify your data to this:

data : [
    { id: "aa", 'name' : "Afar" },
    { id: "ab", 'name' : "Abkhazian" },
    ...
]

edited Jan 17 '13 at 20:27

answered Jul 17 '11 at 18:08

Molecular Man

22,277
3
72
89

@drfanai, if you want use your data all the same, you have to create your own reader – Molecular Man Jul 17 '11 at 18:26
It's created server side and let's just suppose what if i can't modify my data and what's the solution on js world? – Mehdi Fanai Jul 18 '11 at 07:12
Shouldn't it be like this? data : [ {id: "aa", 'name' : "Afar"}, {id: "ab" : 'name' : "Abkhazian"}, ... ] – Roberto Jan 17 '13 at 19:04

How to create Ext.data.Store from an unusual JSON store?

3 Answers3

Linked