extjs - Ext.tabPanel maximize vertical height

Question

I'm new to Ext JS. I have a problem with height of Ext.tabPanel. My Ext JS code: HTML Code:

<div id="TabPanel"></div>
<script type="text/javascript"> 
Ext.onReady(function () {
var ex2 = new Ext.TabPanel({plain: true,renderTo: TabPanel,
items: [{title: 'Tab 1',
 html: '<div>Hello</div>'}
{title: 'Tab 2',html:'<div">Hello</div>'}]});})
</script>

How can I extend my tab panel on maximum height?

Answer 1

Ext.create('Ext.tab.Panel', {
    width: 500,
    height: 700,
    activeTab: 0,
    items: [
        {
            title: 'Tab 1',
            bodyPadding: 10,
            html : '<div>Hello from tab1</div>'
        },
        {
            title: 'Tab 2',
            html : '<div>Hello from tab2</div>'
        }
    ],
    renderTo : Ext.getBody()
});

Answer 2

您正在将选项卡呈现为div，因此添加height=100%到 div 属性：

<div id="TabPanel" height="100%"></div>