PDA

View Full Version : Ext.tabPanel height problem



Higgs.Boson
29 Apr 2013, 8:59 PM
I'm new to Ext JS. I have a problem with height of Ext.tabPanel.
My Ext JS code:

<div id="TabPanel"></div><script type="text/javascript"> Ext.onReady(function () { var ex1 = new Ext.TabPanel({ plain: true, renderTo: TabPanel, items: [{ title: 'Tab 1', html: '<div>Hello</div>' }, { title: 'Tab 2', html: '<div">Hello</div>' }] }); })</script>
Result on browser:
43429
How can I extend my tab panel on maximum height?

slemmon
1 May 2013, 1:51 PM
If you're wanting your tabpanel to take up all available width/height on a page you can make it the child item of a viewport with layout: 'fit'. Fit will have the single child item take up all available space within its parent container and the Viewport will always take up all available space within a browser window.



Ext.widget('viewport', {
layout: 'fit',
items: [{
xtype: 'tabpanel'
plain: true,
items: [{
title: 'Tab 1',
html: '<div>Hello</div>'
}, {
title: 'Tab 2',
html: '<div">Hello</div>'
}
]
}]
});

Higgs.Boson
6 May 2013, 8:59 AM
Thank you very much!!!