View Full Version : Buffered grid syncs only the changes in the current page (ExtJS 4.1)

10 Aug 2012, 7:14 AM
Hi All,

I have a buffered grid similar to this example (but with server proxy):

(http://docs.sencha.com/ext-js/4-1/#!/example/grid/buffer-grid.html)The grid is editable using CellEditing plugin (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.CellEditing).

I make the changes in the cells that are in different pages but when I sync the store, it submits only the changes made in the current page (the page which is visible right now).

I want it to submit all the changes.

Does anyone know if it's supposed to submit all the changes? How could it be configured to submit all the changes?


29 Apr 2013, 7:25 AM
I'm having the same problem here. I have an editable grid with a buffered store. You can edit the first record in the grid, scroll down to the last record (100 records total) and sync the store. The result is that nothing happens, the first record is not passed to the server only when you scroll to the top of the grid.
I found out that the getModifiedRecords method of the store already returns an empty array when the modified records are not on the current page.
Is this a ExtJS bug or do you need a special configuration to do this trick?

27 Feb 2015, 8:45 AM
i've searching for this solution too... my actual solution is blocking bbar if the grid has changed.

this is not a solution, but you can save all modified records and phantom records in your controller, using store.getRejectRecords(), and sync all when you click a button...

in my project, i want show the phantom record in the current page when navigate between pages... so, i saved the phantom record in controller attribute when bbar beforechange event is fired, and insert on the current page when bbar change event is fired... i dont know if its the current way, but works for me...

in grid controller

onBBarBeforeChange : function(bbar, psize, e){ console.log('paging - beforechange'); var me = this, store = this.getViewModel().getStore('clients'); Ext.Object.each(store.getRejectRecords(), function(key, value) { if(value.phantom){ me.savedRecord = value; var grid = me.lookupReference('client-grid-ref'); grid.getSelectionModel().deselectAll(); return; } }); }, onBBarChange : function(bbar, e) {
console.log('paging - change'); if(this.savedRecord){ delete this.savedRecord.data.id; var store = this.getViewModel().getStore('clients'); //se nao existe registro ou se existe e esse registro fantasma var record = Ext.create('OndeComer.model.Client', {}); store.insert(0, record);
//dessa forma, ao copiar, ele mostra os campos na grid como alterados Ext.Object.each(this.savedRecord.data, function(key, value) { store.getAt(0).set(key, value); }); delete this.savedRecord; } },

in bbar

bbar: {
xtype: 'pagingtoolbar',
displayMsg: 'Exibindo Clientes {0} - {1} de {2}', emptyMsg: "Sem Clientes para exibir.", listeners:{ beforechange : 'onBBarBeforeChange', change: 'onBBarChange' }, pageSize: 3, bind: { store: '{clients}' }, displayInfo: true }