Results 1 to 6 of 6

Thread: Resize TabPanel

  1. #1
    Touch Premium Member
    Join Date
    Aug 2011
    Location
    Sydney
    Posts
    68

    Default Resize TabPanel

    How can I dynamically resize the width of a tabPanel ?

    Thanks
    Himal

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    You can use <tabpanel>.setWidth()

  3. #3
    Touch Premium Member
    Join Date
    Aug 2011
    Location
    Sydney
    Posts
    68

    Default

    Thanks vietits,
    Thanks for your prompt reply,
    What i need to do is, it should resize it's width to 100%, every time i resize my browser. right now it doesnt. and it end up having white place on the right.

    Thanks
    Himal

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    It depends on tab's container layout. Try to set container layout of tab to 'fit' and also remove width config from tabpanel setting.

  5. #5
    Touch Premium Member
    Join Date
    Aug 2011
    Location
    Sydney
    Posts
    68

    Default

    Here is the code that i have used, but no luck.
    Code:
     var tabs = new Ext.TabPanel({
            renderTo: 'toptoolbar',
            height: 116,
     layout:'fit',
            activeTab: 0,
            defaults: {
                bodyPadding: 10
            },
    toptoolbar is a div.
    Code:
    <div id='toptoolbar' style="height:116px; position:absolute; z-index:1000; left:0; top:0;width:100%">
    </div>
    Thanks
    Himal

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    Oh, 'toptoolbar' in your case is not a container I mentioned in my previous post. It's just an HTML element. The container I mentioned is an instance of Ext.container.Container class or its sub-class.

    Let consider using Ext.container.Viewport and then put your tab inside this viewport. For example:
    Code:
    Ext.create('Ext.container.Viewport',{
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: {
            xtype: 'tabpanel',
            height: 200,
            items: [{
                title: 'Tab 1',
                html: "My content was added during construction."
            },{
                title: 'Tab 2'
            },{
                title: 'Tab 3'
            },{
                title: 'Tab 4'
            },{
                title: 'Disabled Tab',
                disabled: true,
                html: "Can't see me cause I'm disabled"
            }]
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •