PDA

View Full Version : Could Not Dynamic Create Grid on TabPanel



xxbd123
20 Apr 2012, 12:18 AM
Code:


Ext.define('MyApp.MyTabPanel', {
extend: 'Ext.tab.Panel',


height: 250,
width: 400,
activeTab: 0,


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
id:'tab1',
xtype: 'panel',
title: 'Tab 1'
}
]
});


me.callParent(arguments);
}


});
onready:
//create("MyApp.MyTabPanel")
create("gridpanel",{
renderTo:document.getElementById(‘tab1')
});


Thanks

scottmartin
22 Apr 2012, 12:56 PM
See if this will help:



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'
}
}
});

var mygrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1
}, {
header: 'Change',
dataIndex: 'change'
}],
height: 200,
width: 400
});

var items = {};

var mypanel = Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
items: items,
renderTo: Ext.getBody()
});

var tab = mypanel.add({
title: 'mytab',
layout: {
type: 'vbox',
align: 'stretch',
pack: 'start'
},
border: false,
items: [mygrid]

});

mypanel.doLayout();
mypanel.setActiveTab(tab);


Regards,
Scott.