Code:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', 'email':'lisa@simpsons.com', 'change':100 },
{ 'name': 'Bart', 'email':'bart@simpsons.com', 'change':-20 },
{ 'name': 'Homer', 'email':'home@simpsons.com', 'change':23 },
{ 'name': 'Marge', 'email':'marge@simpsons.com', 'change':-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.define('MY.grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.simpsonsgrid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change', tdCls: 'x-change-cell' }
]
});
Ext.onReady(function() {
var items = [{}];
var button1 = new Ext.Button({
text: 'Create Tab',
width: 150,
renderTo: Ext.getBody(),
handler: Ext.Function.bind(addTab, this, [ this.text ], true)
});
var tabPanel = Ext.createWidget('tabpanel', {
itemId: 'mytabpanel',
renderTo: Ext.getBody(),
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 500,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: items
});
function addTab(item,event,text,id){
var id = tabPanel.items.length;
var tab = tabPanel.add({
title: 'text-'+id,
itemId: 'id-'+id,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
closeAction: 'close',
closable: true,
border: false,
items: [
{
xtype: 'simpsonsgrid',
title: 'Simpsons Grid '+id
}]
});
tabPanel.doLayout();
tabPanel.setActiveTab(tab);
}
});
Scott.