Grid loses data on tab panel change after scrolling

[scancubus]

Hello,

I have an app with two grids bound to the same store. After I move the scroller in one of them, and then switch tabs to view the other grid, the scroller on the second grid scrolls to the top, and the grid is blank. The way to break this example is as follows:

1. Scroll down infinite grid in Tab Panel 1,
2. Click on Tab Panel 2(notice that the scroller is at the same position and grid is still visible)
3. Click on Tab Panel 1 again ( notice that grid is blank)

Also, the row numberer is not displaying in Tab Panel 2 grid AT ALL. Both grids are the same xtype.

as always, a complete example. We all know how much you like this :) Thanks ahead of time for fixing!


Ext.require(['*']);
Ext.onReady(function() {
var cw;


function closeRegion (e, target, header, tool) {
var region = header.ownerCt;
newRegions.unshift(region.initialConfig);
viewport.remove(region);
}
/*Create Infinite Grid
*/
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});


// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteSort: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'lastpost',
direction: 'DESC'
}]
});


function renderTopic(value, p, record) {
return Ext.String.format(
'<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}


Ext.define('My.Infinite.Grid', {
extend:'Ext.grid.Panel',
alias:'widget.infiniteGrid',
//width: 1000,
//height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: false
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true
}]
});


// Load a maximum of 100 records into the prefetch buffer (which is NOT mapped to the UI)
// When that has completed, instruct the Store to load the first page from prefetch into the live, mapped record cache



Ext.define('My.Tab.Item', {
extend:'Ext.panel.Panel',
alias:'widget.tabItem',
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: true,
title: 'North',
split: true,
height: 100,
minHeight: 60,
html: 'north'
},{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '30%',
minWidth: 100,
minHeight: 140,
html: 'west<br>I am floatable'
},{
region: 'center',
layout:'fit',
title: 'Center',
minHeight: 80,
items: [
{
xtype:'infiniteGrid'
}]
},{
region: 'east',
collapsible: true,
floatable: true,
split: true,
width: 200,
title: 'East'
},{
region: 'south',
collapsible: true,
collapsed:true,
split: true,
height: 200,
minHeight: 120,
title: 'South'
}]
});
var tabPanel=Ext.create('Ext.tab.Panel', {
items: [
{
xtype:'tabItem',
title:'Tab Item 1'
},{
xtype:'tabItem',
title:'Tab Item 2'
}
]
});
var viewport=Ext.create('Ext.Viewport',{
layout:'fit',
items:tabPanel,
renderTo:Ext.getBody()
});
store.prefetch({
start: 0,
limit: 99,
callback: function() {
store.guaranteeRange(0, 49);
}
});
});

[mitchellsimoens]

I cannot get your code to work...

You should not use Ext.define within Ext.onReady. The way you had it setup, your two grids would share the same store. Moving Ext.define statements outside Ext.onReady produced a lot of errors with your code and your classes are going to be sharing a lot of the same things.

[scancubus]

What is the error that you are getting?


You guys use Ext.Define in a lot of your examples. For example:

http://docs.sencha.com/ext-js/4-0/#!/example/grid/infinite-scroll.html



Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', '../ux/');Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.grid.PagingScroller']);Ext.onReady(function(){ Ext.define('ForumThread', {
Are you saying that two grids cannot share the same store? I'm not sure how to interpret your comment. Thanks.

[mitchellsimoens]

For our examples it's best. Each class should really have it's own file in a structure filesystem.

Your grids can share the same store if you wish but if you make a change in one grid that will be reflected in the other grid... like sorting or filtering.