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?

Answer 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

Answer 2

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' },
        ...
    ]
}