Cannot load data in an ExtJS gridpanel with loadData()

Question

I need to periodically add new data in the grid's store. The store is defined by the following code:

this.reader = new Ext.data.JsonReader({
        idProperty: 'id',
        fields: this.lesFields
    });
this.ds = new Ext.data.GroupingStore({
        reader: this.reader,
        data: this.leData,
        sortInfo: {field: 'dendisc', direction: 'ASC'},
        groupField: 'categorie'
    });

When I need to append some new data, I do this using this.getStore().loadData(this.leData). Technically the data does appear in the grid's store, but I see on the display only zeros (in the int fields) and blank strings (in the string fields). I did some researches in Chrome's console and I found out that the data property and the json property are not the same in this.getStore().data. In json there is the array with valid data, but in data there are only zeros and blank strings.

Am I missing something? Would the handleAs:'json' property save the situation?

The complete path for `data` and `json` properties is `this.getStore().data.items[i]` — Giku Promitt, May 13 '11 at 12:18
@sra, sorry I cannot post the screenshot. `this.leData` looks like `[ Array[28], Array[28], Array[28], Array[28] ]`. see [link](http://promitt.files.wordpress.com/2011/05/capture.png) — Giku Promitt, May 13 '11 at 12:26

score 3 · Answer 1 · answered May 14 '11 at 21:48

JsonReader requires root to be defined. root points the sub-property which contains the records.

here a sample taken from ext documentation:

var myReader = new Ext.data.JsonReader({
    idProperty: 'id'
    root: 'rows',
    totalProperty: 'totalRows',
    fields: [
        {name: 'id' },
        {name: 'name' }
    ]
});

and a sample data to be read:

{
    success: true,
    totalRows: 100,
    rows: [  // root
        { id: 1, name: 'Alf' },
        { id: 2, name: 'Ben' },
        { id: 3, name: 'Cod' },
        ...
    ]
}

if everything is ok, you should check your fields definition. — ncank, May 14 '11 at 21:49

score 1 · Accepted Answer · answered May 13 '11 at 12:32

1

I am not that used to GroupingStores but I think the Reader expect a json object like { Id:0, Name: 'MyName' } or a Array of such objects and then try to match them against the registered fieldnames. But I don't know what there is in your arrays so this is just a guess

answered May 13 '11 at 12:32

sra

23,820
7
55
89

The reader does recognize the data. see [the console output](http://promitt.files.wordpress.com/2011/05/capture2.png) – Giku Promitt May 13 '11 at 12:51
@Giku Yes it reconize that there is data an try to read it, but it seems that the reader is not able to map the data to the corresponding field. So it recognized the data but can not match it, therefore your just get empty records. Now are there JSON objects in your array or are there just values? – sra May 13 '11 at 12:55
1

@Giku Never mind and maybe I got you totally wrong but if the content of this => `Array[28]` matches the the images, means that is is just a collection of 28 values, how does the reader know which value belongs to which field... so he just insert a empty record. As far as I know the reader need a json object with `{ field: 'value' }` – sra May 13 '11 at 13:20
@Giku That's way I ask for more details on your Data that you are trying to load – sra May 13 '11 at 13:21
Thanks a lot for your feedback, sra. You are right, the reader cannot find the match for the data I'm appending. I searched for a solution in order to transform an array `[...]` to an object `{...}`. I found out a function [here](http://stackoverflow.com/questions/4215737/convert-array-to-object/4215753#4215753), and I made some modifications in it. Now the data displays just the way it should. Thanks again sra, have a nice day. – Giku Promitt May 13 '11 at 14:00
@Giku perfect! Then you could set your question as answered. – sra May 13 '11 at 18:11

Cannot load data in an ExtJS gridpanel with loadData()

2 Answers2