1. #1
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    247
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Question autoScroll does not work for TabPanel nested in border layout

    autoScroll does not work for TabPanel nested in border layout


    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:
    Code:
        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.
    Last edited by Troy Wolf; 5 Oct 2011 at 5:08 AM. Reason: SOLVED!

  2. #2
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    247
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Default Problem exists in v4 as well

    Problem exists in v4 as well


    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.

  3. #3
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    247
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      1  

    Default Solution!

    Solution!


    The solution is this one line in the center region config:
    Code:
    layout: 'fit'
    Code:
        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?!'
              }]
            })
        });

  4. #4
    Sencha Premium Member Troy Wolf's Avatar
    Join Date
    May 2007
    Location
    Kansas City
    Posts
    247
    Vote Rating
    2
    Troy Wolf is on a distinguished road

      0  

    Lightbulb SOLUTION: Scollbars when tabpanel nested in a form or another tabpanel

    SOLUTION: Scollbars when tabpanel nested in a form or another tabpanel


    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

    Code:
        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
    Code:
        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!