View Full Version : Grid loses data on tab panel change after scrolling

17 Dec 2011, 8:48 PM

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.onReady(function() {
var cw;

function closeRegion (e, target, header, tool) {
var region = header.ownerCt;
/*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>',

Ext.define('My.Infinite.Grid', {
//width: 1000,
//height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
multiSelect: true,
viewConfig: {
trackOver: false
// grid 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', {
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',
title: 'Center',
minHeight: 80,
items: [
region: 'east',
collapsible: true,
floatable: true,
split: true,
width: 200,
title: 'East'
region: 'south',
collapsible: true,
split: true,
height: 200,
minHeight: 120,
title: 'South'
var tabPanel=Ext.create('Ext.tab.Panel', {
items: [
title:'Tab Item 1'
title:'Tab Item 2'
var viewport=Ext.create('Ext.Viewport',{
start: 0,
limit: 99,
callback: function() {
store.guaranteeRange(0, 49);

18 Dec 2011, 4:20 AM
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.

18 Dec 2011, 10:59 AM
What is the error that you are getting?

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


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.

19 Dec 2011, 6:50 AM
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.