Short summary of problem: Unexpected grid-refreshing issue once I paged through a result list with the PagingToolbar. The updated Json store results are not displayed in the grid (and toolbars).
I built a gridPanel to display a search result list. Data is retrieved from a Json store. The grid panel resides inside a tabPanel that is created if I execute a search. First of all the result tab and the gridPanel are properly created and populated as expected. If I change the searchterm and execute a new search on the Json store, I can see (in Firebug), that the store reloads and updates from the server, even paging in the results works fine so far. But once I paged trough the results (via the toolbar buttons) and then execute a new search, the grid does not update (nor does the toolbar) whilst the Json store *is* updated (which I can verify using Firebug to look at the return values). Even debugging the number of results in the store gives the expected (updated) value. So only the grid itself does not reflect the changes.
The Json store has two listeners, one for load and one for exception, both are called and work properly (tested with console.log()).
When I encountered this grid-refresh-issue the first time, I modified the script to destroy (identified by its id) the result tab panel prior a new search is executed. This also works fine - until I once page in the grid using the toolbar, afterwards the result tab is no longer destroyed (although no error is logged in the console).
I have no further ideas how to isolate the cause of the rendering problem since it seems not to becaused by the Json store - any suggestion is welcome!
Andreas
Code:
var resultList = new Ext.grid.GridPanel({
id: 'result-list',
width: 430,
autoHeight: true,
title: 'Search Results',
store: this.resultListJsonStore,
trackMouseOver: true,
disableSelection: true,
loadMask: true,
header: false,
hideHeaders: true,
enableHdMenu: false,
collapsible: false,
columns: [{
id: 'topic',
header: "Results by Searchterm",
dataIndex: 'relevance',
width: 430,
renderer: this.renderSingleItem,
sortable: false,
loadMask: true
}],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass : function(record, rowIndex, p, resultListJsonStore){
return 'x-grid3-row-collapsed';
}
},
tbar: new Ext.PagingToolbar({
id: 'result-list-tbar',
pageSize: 10,
store: this.resultListJsonStore,
displayInfo: true,
displayMsg: 'Results {0} - {1} of {2}',
emptyMsg: "No results"
}),
// paging bar on bottom
bbar: new Ext.PagingToolbar({
id: 'result-list-bbar',
pageSize: 10,
store: this.resultListJsonStore,
displayInfo: true,
displayMsg: 'Results {0} - {1} of {2}',
emptyMsg: "No results"
})
});