PDA

View Full Version : Re-apply grid filter and sort after adding record to store



jshailes
25 Jul 2013, 7:46 AM
I'm trying to create a grid that reflects the contents of the db in near realtime, so I load all the data initially and then poll for new records in the db using ajax, calling
store.insert(0, myNewRecord)

All works well until I try to deal with grid sorting and filtering.

Sorting
Regardless of whether there are any sorts on the columns, the new record is always added at index 0. Is there a way to resort the grid after it has a new row added? I considered calling
store.sort(field, order) but to do this i'd need to know what sorts are already on the grid.

Filtering
A very similar problem as sorting in that the new records are displayed in the grid at index 0 regardless of whether they match the filter criteria. Is there a way to reapply the filter?
In addition to this when I iterate over the filtered store with
store.each() to find the max id it only iterates over the filtered records rather than all records in the store - is there a way of iterating over all records rather than just the ones that are filtered?

slemmon
29 Jul 2013, 3:35 PM
You can use addSorted() instead of insert to have the sort order honored at the time of the add.
The store doesn't have a way out of the box to manage the filtering of an added record, though.

See if this example helps at all:



var grid = new Ext.grid.GridPanel({
renderTo: document.body,
store: new Ext.data.JsonStore({
fields: ['company'],
data: {data: [{
company: 'First'
}, {
company: 'Second'
}]},
root: 'data'
}),
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'company', header: 'Company', width: 200, sortable: true, dataIndex: 'company'}
]
}),
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid',
tbar: [{
text: 'Filter by First',
handler: function () {
var store = grid.getStore(),
myFilter = { property: 'company', value: 'First' };


store.filter(myFilter);
store.myLastFilter = myFilter;
}
}, {
text: 'Insert Sorted',
handler: function () {
var store = grid.getStore(),
r = new store.recordType({'company': 'Z'});

store.addSorted(r);
if (store.isFiltered()) {
store.filter(store.myLastFilter);
}
}
}, {
text: 'Clear Filter',
handler: function () {
grid.getStore().clearFilter();
}
}]
});