Code:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore1',
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'
}
}
});
var grid1 = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore1'),
columns: [
{
text: 'Name',
dataIndex: 'name'},
{
text: 'Email',
dataIndex: 'email',
flex: 1},
{
text: 'Phone',
dataIndex: 'phone'}
]
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore2',
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'
}
}
});
var grid2 = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore2'),
viewConfig: {
listeners: {
viewready: function(thisField) {
alert("ready 2");
}
}
},
columns: [
{
text: 'Name',
dataIndex: 'name'},
{
text: 'Email',
dataIndex: 'email',
flex: 1},
{
text: 'Phone',
dataIndex: 'phone'}
]/*,
listeners: {
render: function(thisGrid) {
alert('rendered');
}
}*/
});
var panel1 = new Ext.panel.Panel({
title: 'tab 1',
layout: 'fit',
items: [grid1]
});
var panel2 = new Ext.panel.Panel({
title: 'tab 2',
layout: 'fit',
items: [grid2]
});
Ext.create('Ext.tab.Panel', {
width: 600,
height: 600,
activeTab: 0,
deferredRender: false,
defaults: { hideMode: 'offsets' },
items: [
panel1,
panel2
],
renderTo: Ext.getBody()
});