Nothing displayed after reconfiguring Ext.grid.Panel with a different store [Archive]

sheep-allegro

7 Oct 2011, 6:59 AM

I'm trying to use Ext.grid.Panel.reconfigure() to change the store of a grid panel, but it doesn't seem to be working -- the displayed grid is empty, no matter what data is in the store. Here is some example code, mostly copy-pasted from documentation to avoid silly mistakes:

Ext.application({
name: 'Test',
launch: function() {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId:'otherStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'aLisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'aBart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'aHomer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'aMarge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
id: 'gridpanel',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

var store = Ext.StoreManager.get('otherStore');
console.log(store);
var panel = Ext.ComponentManager.get('gridpanel');
console.log(panel);
panel.reconfigure(store);
console.log(panel);
}
});

You can see in the console output that the panel's store is indeed changed to the otherStore, and you can see that the display is updated -- but it is updated to display nothing, instead of the data from the otherStore.

I tried calling panel.update(), panel.show(), panel.render(), etc. -- it doesn't seem to be doing much. How can I redisplay the grid data after reconfiguring it to use a different store?

By the way, I do realize that changing the store of an existing grid is not a very nice solution. I need it to upgrade a grid that is embedded inside a form with a store generated from HasMany relation in the model for that form. If there is a nicer way to update it, I'm all ears.

Do you have any idea on what I'm doing wrong. I spent two days on it already and I'm pretty much stumped.

newbie.scott

7 Oct 2011, 8:24 AM

Am having the same problem,

However i made into a point where reconfigure is working, but very messy code. (See the Code 1). Ideally I would like to have a skeleton/single global instance of model,proxy,store and table. Depends on data that server sends will reconfigure Mode, Proxy,Store and Table, am still working on it and seeking help (See the Code 2). This code not displaying data.

CODE 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CatalogExplorerTable Component</title>


<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection"
href="css/ext-all.css" />

<script type="text/javascript" src="js/expcat.js"></script>

</head>

<script>
/*create model with proxy*/
var modelId1 = 'myModel1';
var modelId2 = 'myModel2';
var myFields1 = [ 'name', 'email', 'phone' ];
var myFields2 = [ 'title', 'story' ];

var myProxy1 = Ext.create('Ext.data.proxy.Ajax', {
url : 'data/users.json',
reader : {
type : 'json',
root : 'users',
totalProperty : 'total'
}
});

var myProxy2 = Ext.create('Ext.data.proxy.Ajax', {
url : 'data/story.json',
reader : {
type : 'json',
root : 'stories',
totalProperty : 'total'
}
});

Ext.regModel(modelId1, {
extend : 'Ext.data.Model',
fields : myFields1,
proxy : myProxy1
});

Ext.regModel(modelId2, {
extend : 'Ext.data.Model',
fields : myFields2,
proxy : myProxy2
});

var myStore1 = Ext.create('Ext.data.Store', {
storeId:'fStore',
model : modelId1,
autoLoad : false,
autoDestroy: false,
pageSize : 4,
});

var myStore2 = Ext.create('Ext.data.Store', {
storeId:'sStore',
model : modelId2,
autoLoad : false,
autoDestroy: false,
pageSize : 4,
});

var tableColumns;
var extTable;

function createGrid() {

if ((extTable != undefined) || (extTable != null)) {
console.log('extTable exist, reconfiguring');

tableColumns = [ {
text : 'title',
width : 150,
dataIndex : 'title'
}, {
text : 'story',
flex : 1,
dataIndex : 'story'
} ];

extTable.reconfigure(myStore2, tableColumns);
extTable.getStore().load();
console.log('Count: ' + myStore2.count());
console.log(' myStore2 ' + myStore2);

} else {
tableColumns = [ {
text : 'Name',
width : 100,
dataIndex : 'name'
}, {
text : 'Email Address',
width : 150,
dataIndex : 'email'
}, {
text : 'Phone Number',
flex : 1,
dataIndex : 'phone'
} ];

extTable = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
store : myStore1,
width : 400,
height : 200,
title : 'title',
columns : tableColumns
});
extTable.getStore().load();
console.log('Count: ' + myStore1.count());
}

}
</script>
<body>
<button type="button" onclick="createGrid();">create grid</button>
</body>
</html>

CODE 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Table Component</title>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" media="screen, projection"
href="css/ext-all.css" />
</head>

<script>
/*Create initial skeleton classes which dynamically reconfigured later to display different data*/

var modelId = 'myModel';
var myFields;

Ext.regModel(modelId, {
extend : 'Ext.data.Model'
});
var myProxy = Ext.create('Ext.data.proxy.Ajax', {
reader : {
type : 'json',
}
});

var myStore = Ext.create('Ext.data.Store', {
model : Ext.ModelManager.getModel(modelId),
proxy : myProxy,
autoLoad : false,
autoDestroy : false,
pageSize : 4
});

var tableColumns;
var extTable ;

/*create grid button handler*/
function createGrid() {

if ((extTable != undefined) || (extTable != null)) {
console.log('extTable exist, reconfiguring');

/*reconfigure Ajax proxy*/
myProxy.url = 'data/story.json';
myProxy.getReader().root = 'stories';

/* reconfigure model with new fields*/
myFields = [ 'title', 'story' ];
Ext.ModelManager.getModel(modelId).fields = myFields;

/* reconfigure store with mode and proxy*/
myStore.model = Ext.ModelManager.getModel(modelId);
myStore.setProxy(myProxy);

tableColumns = [ {
text : 'title',
width : 150,
dataIndex : 'title'
}, {
text : 'story',
flex : 1,
dataIndex : 'story'
} ];

extTable.reconfigure(myStore, tableColumns);
extTable.getStore().load();
} else {
/*reconfigure Ajax proxy*/
myProxy.url = 'data/users.json';
myProxy.getReader().root = 'users';

/* reconfigure model with new fields*/
myFields = [ 'name', 'email', 'phone' ];
Ext.ModelManager.getModel(modelId).fields = myFields;

/* reconfigure store with mode and proxy*/
myStore.model = Ext.ModelManager.getModel(modelId);
myStore.setProxy(myProxy);

tableColumns = [ {
text : 'Name',
width : 100,
dataIndex : 'name'
}, {
text : 'Email Address',
width : 150,
dataIndex : 'email'
}, {
text : 'Phone Number',
flex : 1,
dataIndex : 'phone'
} ];

extTable = Ext.create('Ext.grid.Panel', {
renderTo : Ext.getBody(),
store : myStore,
width : 400,
height : 200,
title : 'title',
columns : tableColumns
});
extTable.getStore().load();
}

}

</script>
<body>
<button type="button" onclick="createGrid();">create grid</button>
</body>
</html>

JSON DATA:

users.json:
{
"success": true,
"total": 12,
"users": [
{ "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
{ "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
{ "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
{ "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
]
}

------------------
story.json:
{
"success": true,
"total": 12,
"stories": [
{ "title": "123", "story": "abc" },
{ "title": "asd", "story": "rty" },
]
}

skirtle

7 Oct 2011, 10:25 AM

@sheep-allegro. It's a bug. Your code works fine in 4.0.6 but not in 4.0.2. To get it to work in 4.0.2 you need to re-specify the columns when you call reconfigure(). If you have a quick look at the source code for 4.0.2 you'll see that it destroys the old columns before it checks that you've specified any new ones.

sheep-allegro

9 Oct 2011, 11:10 PM

Thank you very much.

phamtranquocviet

11 Mar 2012, 8:03 PM

I still see this bug in 4.0.7 (open source version)