Static grid with dynamic data on button click in extjs4 - extjs4

Question

I'm trying to display different data (from different store and model) deponding on button click but failing at some point ( to be frank, I'm not sure how to use the reconfigure function). Below is my code:
Components and button click function:
Ext.define('MyApp.view.MyPanel', {
extend: 'Ext.panel.Panel',
height: 328,
width: 478,
title: 'My Panel',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Button1'
},
{
xtype: 'button',
text: 'Button2',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
},
{
xtype: 'button',
text: 'Button3'
},
{
xtype: 'gridpanel',
id: 'myGrid',
title: 'My Grid Panel',
store: 'Button1Store',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'Email',
text: 'Email'
}
]
}
]
});
me.callParent(arguments);
},
onButtonClick: function(button, e, eOpts) {
//alert("button 2");
var gridVar = Ext.getCmp('myGrid');
var newStore = Ext.getCmp('MyStore2');
//alert( gridVar.columns[0].dataIndex);
//gridVar.bindStore(newStore);
gridVar.reconfigure(newStore, gridVar.columns);
}
});
Store1 and Model 1:
Ext.define('MyApp.store.Button1Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button1Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MyApp.model.Button1Model',
storeId: 'MyStore1',
data: [
{
Name: '1',
Email: 'test1'
},
{
Name: '2',
Email: 'test2'
},
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button1Model', {
extend: 'Ext.data.Model',
idProperty: 'Button1Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
Store 2 and Model 2:
Ext.define('MyApp.store.Button2Store', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.Button2Model'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
model: 'MyApp.model.Button2Model',
storeId: 'MyStore2',
data: [
{
Name: '3',
Email: 'test3'
},
{
Name: '4',
Email: 'test4'
}
]
}, cfg)]);
}
});
Ext.define('MyApp.model.Button2Model', {
extend: 'Ext.data.Model',
fields: [
{
name: 'Name'
},
{
name: 'Email'
}
]
});
When I try this, the title and data in the grid dissappears. I tried the gridVar.bindStore(newStore); but it throwed an error stating that data is null or undefined. Pls help...

Answer 1

If you are using same grid for all actions then change the store's proxy URL for various actions and populate the data to grid by using load() method !!