PDA

View Full Version : uneven number of records in store and grid?



ImShogun
18 Sep 2013, 12:32 AM
Hi,

I've been playing a while now with stores, grids, proxies etc, but I what's happening in this small exemple, I don't understand: Despite having only four records, one being updated with "add()" and using the same 'id', yet it add a row in the grid. I really thought a grid was always bound to a store, how can the number of rows differ in the grid versus the store?

So far, the only solution I found to do what I want, which is replacing a row in the grid whith the updated record of that row, is update() the store after each add().

But... why? Are these updates only done automatically when you use a CRUD method (Which I prefer not to do in this case)?

Thanks!



//CREATE A STORE
var S = Ext.create('Ext.data.Store', { fields:['id', 'email', 'phone'], data:{'items':[ { 'id': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" }, { 'id': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" }, { 'id': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" }, { 'id': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } }});
//ADD IT TO A GRID
var P = Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: S, columns: [ { text: 'Name', dataIndex: 'id' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' } ], height: 200, width: 400});
//CREATE A WINDOW
var W = Ext.create('widget.window',{title:'test',width:500,height:300,layout:'fit'}).show();
//ADD THE GRID TO THE WINDOWW.add(P);


45869

Now I add a record:



//CHECK THE NUMBER OF RECORDS IN THE STORE: 4 RECORDS
console.log('Store data length',S.data.length);
//ALTER A RECORD IN THE STORE (NEW PHONE NUMBER)S.add({ 'id': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1234" });
//DUMP THE NUMBER OF RECORDS OF THE STORE: STILL 4, WHICH IS CORRECT GIVEN THAT WE USE 'id'console.log('Store data length',S.data.length);


And I get an unwanted duplicate of Lisas's fiche: the old and new ones.

45868

And now I update the store:



S.update();


And Lisa's old Fiche dissapear (hurah!):

45867

ettavolt
18 Sep 2013, 12:49 AM
If you update record, you must call .set(values) on that record, e.g.

S.getById('Lisa').set({phone:"555-111-1234"});
store.add creates a new record and then tries to add it to data. Data is, however, a set, keyed by id, so it replaces old record with new one. Store then fires 'add' event and grid is broken, because it cannot find a record for new row.

ImShogun
18 Sep 2013, 2:15 AM
Thank you very much ettavolt (http://www.sencha.com/forum/member.php?316440-ettavolt) for this precise and fast answer.

I did this:



S.getById('Lisa').set({ "id": "Lisa", "email":"lisa@simpsons.com", "phone":"555-111-4444" });


But then the record is marked Dirty, so I either need to disable this check (don't know how) or still trigger update() on the store.

At least now I understand that I found a way to break a grid :-). And I can apply your solution on my real world app.

Thank you again.

PS: one may wonder why I get by id 'Lisa' and then set the id again, but it was just to recreate the context, in my app, the record is an object sent by the server. So it will be more like:



S.getById(updatedRecord.id).set(updatedRecord);

ettavolt
18 Sep 2013, 10:20 PM
If you update record from server, you may want to call record.commit().