I have made a layout of tab panel with extjs designer - extjs

Question

I have made a layout of tab panel with extjs designer but its not displaying anything if I am running it.
Here's the code please help me :
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/s.gif';
Ext.onReady(function(){
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
title: 'Ledger',
itemId: 'ledger_tab',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Ledger',
autoScroll: true,
items: [
{
xtype: 'editorgrid',
title: 'Ledger',
store: 'store',
height: 150,
footer: true,
stripeRows: true,
header: true,
loadMask: true,
id: 'leg_grid_up',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar',
height: 50,
items: [
{
xtype: 'container',
layout: 'column',
width: 794,
height: 43,
items: [
{
xtype: 'spacer',
width: 588,
height: 18
},
{
xtype: 'spacer',
width: 200,
height: 18
},
{
xtype: 'datefield'
}
]
}
]//toolbar items
}
},
{
xtype: 'container',
height: 70
},
{
xtype: 'editorgrid',
title: 'Ledger',
height: 150,
id: 'leg_grid_down',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'textfield'
}
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
header: 'Column',
sortable: true,
width: 100,
align: 'right',
editor: {
xtype: 'numberfield'
}
},
{
xtype: 'datecolumn',
dataIndex: 'date',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'datefield'
}
},
{
xtype: 'booleancolumn',
dataIndex: 'bool',
header: 'Column',
sortable: true,
width: 100,
editor: {
xtype: 'checkbox',
boxLabel: 'BoxLabel'
}
}
],
tbar: {
xtype: 'toolbar'
}
},
{
xtype: 'container'
}
]//ledger panel
}
];//this
MyTabPanelUi.superclass.initComponent.call(this);
}
});
});
});

Answer 1

You need to render it onto some HTML tag. You can use the renderTo property to render the panel onto the body tag or some div tag with an id set.
Let's assume you are planning to render to the body tag. You need to add renderTo : Ext.getBody(). The Ext.getBody method simply returns the body tag.
MyTabPanelUi = Ext.extend(Ext.TabPanel, {
activeTab: 0,
width: 800,
height: 500,
renderTo: Ext.getBody(),
.
.
.

Answer 2

You aren't rendering it.
Try rendering it to Ext.getBody():
MyTabPanelUi.render(Ext.getBody());