1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    Higgs.Boson is on a distinguished road

      0  

    Default Answered: Ext.tabPanel height problem

    Answered: Ext.tabPanel height problem


    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 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:
    1.jpg
    How can I extend my tab panel on maximum height?

  2. 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.

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

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    4,800
    Answers
    359
    Vote Rating
    167
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      1  

    Default


    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.

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

  4. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    6
    Vote Rating
    0
    Higgs.Boson is on a distinguished road

      0  

    Default


    Thank you very much!!!

Thread Participants: 1