View Full Version : new GridPanel and new Store, but new GridPanel still using old Store

22 Nov 2010, 2:25 PM
I'm pretty new to ext, have mercy.

See below for code. I have a tabPanel, a store that extends JsonStore (myStore), and a panel that extends gridpanel (myPanel). I create a new store in the constructor of myPanel.

If I open a new tab, tabPanel.add(new myPanel({tree:'hugger'});
then close that newly opened tab
then open a new different tab, tabPanel.add(new myPanel({tree:'killer'})

The 2nd tab will display the store information for the tree:hugger instead of tree:killer. I'm 100% positive that the server is receiving a new request for the second store instantiation, and that it's returning the correct information. It's like it receives the new data, but still uses store data from the first request it received. If I don't close the first tab, it seems to function fine.

The below code is heavily edited for forum posting, so ignore any syntax errors you may find.

myStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(params) {
params = params || {};

myStore.superclass.constructor.call(this, Ext.apply({
root: 'rows',
url: 'json/users/',
remoteSort: true,
baseParams: params,
autoLoad: {params:{start: 0, limit: 20}},
fields: [
name: 'User_id'
name: 'User_username'
name: 'Group_name'

myPanel = Ext.extend(Ext.grid.GridPanel, {
constructor: function(cfg, params) {
cfg = cfg || {};
params = params || {};

this.store = new myStore(params);

myPanel .superclass.constructor.call(this, Ext.apply({
stripeRows: true,
loadMask: true,
closable: true,
title: 'Users',
autoExpandColumn: 'username',
store: this.store,
height: 500,
bbar: {
xtype: 'paging',
store: this.store,
displayInfo: true
columns: [
xtype: 'gridcolumn',
header: 'Group',
sortable: true,
width: 100,
dataIndex: 'Group_name'
xtype: 'gridcolumn',
id: 'username',
dataIndex: 'User_username',
header: 'Username',
sortable: true
}, cfg));

23 Nov 2010, 5:30 AM
This must be cause by something else you are doing, because this code looks just fine.

13 Dec 2010, 6:09 AM
I'm still having this issue and it seems to be a problem with the Ext framework.

We're evaluating Ext for use in a commercial project and we've been in touch with sales, but they have been somewhere between unhelpful and rude. Can anyone offer additional help?

When the second tab is opened, I can see the ajax request be sent via Firebug and it gets a proper response. The new tab has a proper title, but displays information from the old store and the loadmask is not displayed. It's like it's caching and reusing the old tab.

13 Dec 2010, 6:21 AM
1. Your myStore constructor parameter is called 'params', but in the Ext.apply you use 'cfg'. Shouldn't that be 'params' too?
2. In the myPanel constructor I would assign the store to local variable 'store' instead of to 'this.store'.
3. Are you sure you are not using the same panel or store id for the different tabs?

13 Dec 2010, 6:59 AM
1. params is dedicated for use with the baseParams of the store. I see the dangling cfg in the Ext.apply, that shouldn't be there. I'm assuming Ext.apply is treating it like an empty object, but I'll remove it.
2. I believe I've tried this, but switched to an object variable because I don't understand when stores get autodestroyed and wanted to ensure it persisted. I'll make sure this gets tried.
3. Both tabs are of type myPanel, but are new objects. Tabs are added just like in the first post, "tabPanel.add(new myPanel({tree:'hugger'});" I didn't set the storeid on either tab because I knew they wouldn't be reused.

13 Dec 2010, 7:16 AM
I still think your error is somewhere else and not in this segment of code.

13 Dec 2010, 8:10 AM
I appreciate the help, and I'm not ruling it out, but so far I would disagree. I've simplified my project and linked it below. The error still occurs in this simplified form. The zip contains one php file to simulate database calls.

Example project: http://devel.sscsvc.com/~bclay/ext%20error/
Example zip of project: http://devel.sscsvc.com/~bclay/ext%20error.zip

Project use
Double clicking on a group name in the "Groups" tab opens a gridpanel in a new tab of the users in that group

Scenario 1
As long as no tabs are closed, there are no problems.
Double click on "Test" in the "Groups tab"
Double click on "Administrators" in the "Groups tab"
This works as expected with each gridpanel containing the proper information.

Scenario 2
Open the group "Test" from the "Groups" tab
Close the "Test users" tab
Open the group "Administrators" from the "Groups" tab

You will notice the "Administrators users" tab contains the users from the "Test" group.
If you check firebug, or the like, you will see the proper ajax is sent.
The loadmask never appears on the new tab.

13 Dec 2010, 11:30 AM
Hmm... The tab is not destroyed when you click close. There must be something preventing it from closing...

ps. Small error (but not the cause of your problem):

usersStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(params, limit) {
params = params || {};
groupsStore.superclass.constructor.call(this, {

13 Dec 2010, 11:50 AM
That was the tipoff. Setting the autoDestroy to true on the tabPanel took care of the issue. I had assumed that autoDestroy in this context would be for the entire panel and not an individual tab in the panel.