我正在尝试显示不同的数据（来自不同的商店和模型），在按钮单击时出现，但在某些时候失败（坦率地说，我不确定如何使用重新配置功能）。下面是我的代码：
组件和按钮点击功能：
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);
}
});
商店 1 和模型 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'
}
]
});
商店 2 和模型 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'
}
]
});
当我尝试这个时，网格中的标题和数据消失了。我试过了，gridVar.bindStore(newStore);但它抛出了一个错误，指出数据为空或未定义。请帮助...