autoScroll does not work for TabPanel nested in border layout

[Troy Wolf]

SOLVED! See post below for solution.
(Note, I was unable to edit the title on this post because the "Go Advanced" button produced a "PATHS is undefined" javascript error.)
ISSUE: When a TabPanel is nested in a Viewport with border layout, autoScroll: true has no affect.

Version: ExtJs 3.3.1

Live demo of the issue
http://www.troywolf.com/sencha_issue...scrollbar.html
You can view the source for a simple, stripped-down example of the problem.

Here is the inline javascript from the example:

    Ext.onReady(function(){
        var ui = new Ext.Viewport({
          layout : "border",
          items : [    {
              region : "center",
              title : "Center Region",
              items : [        {
                  xtype : "tabpanel",
                  defaults: {bodyStyle: 'padding: 10px;'},
                  items : [            {
                      xtype : "panel",
                      title : "Apple",
                      autoScroll : true,
                      html: 'Size the overall window so that the contents here do not fit.<br /><br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo'
                  },            {
                      xtype : "panel",
                      title : "Banana"
                  },            {
                      xtype : "panel",
                      title : "Orange"
                  }],
                  activeTab : 0
              }]
          },    {
              region : "south",
              title : "South Region",
              height : 200,
              bodyStyle: 'padding: 10px;',
              html: 'Why is there not a vertical scroll bar in the Apple tab above?!'
          }]
        })
    });

I've found several answers to this issue here in the forums from respected contributors, but none of the suggestions are working for me.

[Troy Wolf]

I confirm the problem is the same in v4 (ext-4.0.2a). See this live example:
http://www.troywolf.com/sencha_issue...ollbar_v4.html

To see the problem (lack of scrollbar), load the page, then size your window so the "Apple" tab contents don't fit into the panel's space. You are left without any method to see the rest of the content.

[Troy Wolf]

The solution is this one line in the center region config:

layout: 'fit'

    Ext.onReady(function(){
        var ui = new Ext.Viewport({
          layout : "border",
          items : [    {
              region : "center",
              title : "Center Region",
              layout: 'fit',   // <------------ SOLUTION!
              items : [        {
                  xtype : "tabpanel",
                  defaults: {bodyStyle: 'padding: 10px;'},
                  items : [            {
                      xtype : "panel",
                      title : "Apple",
                      autoScroll : true,
                      html: 'Size the overall window so that the contents here do not fit.<br /><br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo'
                  },            {
                      xtype : "panel",
                      title : "Banana"
                  },            {
                      xtype : "panel",
                      title : "Orange"
                  }],
                  activeTab : 0
              }]
          },    {
              region : "south",
              title : "South Region",
              height : 200,
              bodyStyle: 'padding: 10px;',
              html: 'Why is there not a vertical scroll bar in the Apple tab above?!'
          }]
        })
    });

[Troy Wolf]

For completeness, and my own reference, I had to solve this same problem for more complex component nesting. Again, the issue I struggled with was getting a vertical scrollbar in individual tabs as necessary.

Tabpanel nested within a form
http://www.troywolf.com/sencha_issue...scrollbar.html

    Ext.onReady(function(){
        var ui = new Ext.Viewport({
            layout : "border",
            items : [{
                region : "center",
                title : "Center Region",
                layout: 'fit',
                items : [{
                    xtype: 'form',
                    labelAlign: 'top',
                    layout: 'fit',
                    border: false,
                    items: [{
                        xtype: 'tabpanel',
                        border: false,
                        activeTab: 0,
                        defaults: {bodyStyle: 'padding: 10px;'},
                        items : [{
                            layout: 'form',
                            title : "Who are you?",
                            autoScroll : true,
                            items: [
                                {html: 'Size the overall window so that the contents here do not fit.<br /><br />', border: false},
                                {xtype: 'textfield', name: 'fname', fieldLabel: 'First Name'},
                                {xtype: 'textfield', name: 'lname', fieldLabel: 'Last Name'},
                                {xtype: 'textfield', name: 'age', fieldLabel: 'Age'},
                                {xtype: 'textfield', name: 'shoesize', fieldLabel: 'Shoe Size'}
                            ]
                        },            {
                            layout: 'form',
                            title : "Identity Theft",
                            autoScroll : true,
                            items: [
                                {xtype: 'textfield', name: 'ssn', fieldLabel: 'SSN#'},
                                {xtype: 'textfield', name: 'maiden', fieldLabel: "Mother's Maiden Name"},
                                {xtype: 'textfield', name: 'bday', fieldLabel: 'Birth Date'}
                            ]
                        },            {
                            layout: 'form',
                            title : "Monty Python",
                            autoScroll : true,
                            items: [
                                {xtype: 'textfield', name: 'favecolor', fieldLabel: 'Favorite Color'},
                                {xtype: 'textfield', name: 'airspeed', fieldLabel: 'Average Air Speed of a Laden Swallow'}
                            ]
                        }]
                    }],
                    buttonAlign: 'center',
                    buttons: [
                        {text: 'Cancel'},
                        {text: 'Save'}
                    ]
                }]
            
            },{
                region : "south",
                title : "South Region",
                height : 200,
                bodyStyle: 'padding: 10px;',
                html: 'Problem solved! Vertical scrollbars in the form as needed.'
            }]
        })
    });

TabPanel nested within another Tab
http://www.troywolf.com/sencha_issue...crollbars.html

    Ext.onReady(function(){
        var ui = new Ext.Viewport({
            layout : "border",
            items : [{
                region : "center",
                title : "Center Region",
                layout: 'fit',
                items : {
                    xtype: 'tabpanel',
                    activeTab: 0,
                    items : [{
                        title : "Apple",
                        layout: 'fit',
                        items: {
                            xtype: 'panel',
                            layout: 'fit',
                            items : [{
                                xtype: 'tabpanel',
                                border: false,
                                activeTab: 0,
                                defaults: {bodyStyle: 'padding: 10px;'},
                                items : [{
                                    title : "Fuji",
                                    autoScroll : true,
                                    html: 'Size the overall window so that the contents here do not fit.<br /><br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo<br />foo'
                                },{
                                    title : "Granny Smith",
                                    autoScroll : true,
                                    html: 'Tab 2'
                                },{
                                    title : "Golden Delicious",
                                    autoScroll : true,
                                    html: 'Foo!'
                                }]
            
                            }]
                        }
                    },{
                        title : "Banana",
                        html: 'Tab 2'
                    },{
                        title : "Orange",
                        html: 'Foo!'
                    }]
                }
            },{
                region : "south",
                title : "South Region",
                height : 200,
                bodyStyle: 'padding: 10px;',
                html: 'Sencha is fun!'
            }]
        })
    });

Enjoy!