I have a fully working liveSearchGridPanel in ExtJs. Error occurs when I edit any row. What Happens is that if the the updated row has to be resorted like in my case when I change the age of user (I am sorting on basis of age) row goes up or down in the grid, but the previous record remain there as well until I refresh the entire webpage manually. Screenshot is below
My proxy model is:
Ext.define('proxymodel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int',
persist: false
}, {
name: 'gender',
type: 'auto'
}, {
name: 'name',
type: 'auto'
}, {
name: 'age',
type: 'int'
}],
identifier: 'sequential', // to generate -1, -2 etc on the client
proxy: {
type: 'rest',
//format: 'json',
//appendId: false,
idParam: "id",
//limitParam:"",
//filterParam: "",
//startParam:'',
//pageParam:'',
url: 'http://localhost:3000/posts',
api: {
read: 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update: 'http://localhost:3000/posts',
destroy: 'http://localhost:3000/posts'
},
headers: {
'Content-Type': "application/json"
},
reader: {
type: 'json',
rootProperty: 'posts',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
});
In Application.js
, I have defined row editing plugin as:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
},
edit: function(editor, e) {
// commit the changes right after editing finished
e.record.commit();
}
}
});
And my store looks like:
Ext.define('Store', {
extend: 'Ext.data.Store',
storeId: 'peopleStore',
pageSize: 500,
//buffered: true,
//leadingBufferZone: 300,
pageSize: 5,
autoLoad: {
start: 0,
limit: 5
},
autoSync: true,
sorters: [{
property: 'age',
direction: 'ASC'
}],
groupField: 'gender'
});
Can anyone point out my mistake?
I have tried to reload my store after editing in 'edit' function of rowEditing
but it didn't work.
Thanks for your time.
As full answer by request:
Have you tried Ext.data.StoreManager.lookup('peopleStore').reload()
?