Jacobian Jacobian - 3 months ago 10
Javascript Question

store add - does not work

I have a simple grid, which looks like so:

{
xtype: "grid",
columns: [{
header: 'Title', flex: 1, dataIndex: 'Title'
}],
store: Ext.create('Ext.data.Store', {
fields:['id', 'Title']
})
}


And I have a function (attached to a button) which, I believe, should populate this grid with some data. It does it like so:

grid.store.removeAll();
records = [{"id":"1", "Title", "Hello world"}];
grid.store.add(records);
grid.store.load();
console.log(grid.store.getCount());


But for some insane reason, the store is empty and
grid.store.getCount()
echoes "0". What the heck is going on? PS. I'm using ExtJS 6.

EDIT

If however I slightly change my code to this:

...
store: Ext.create('Ext.data.Store', {
autoLoad: false,
fields:['id','Title'],
data:[{"id": 1,"Title": "Hello world"}]
})
...

//and in function just one line of code:
grid.store.load();


then it starts working. So, it seems like the whole problem is with
store.add
. It does not do what it should.

Answer

Just remove grid.store.load().

The load marks the store as needing a load, but if your adding records using add that is not what you need.

Working example: https://fiddle.sencha.com/#fiddle/1fbv

Comments