1. #1
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    rich_andrews is on a distinguished road

      0  

    Default Nested Tabpanel activeTab: and autoLoad: doesn't resize container to content

    Nested Tabpanel activeTab: and autoLoad: doesn't resize container to content


    I'm guessing I'm just doing something dumb.

    The desired outcome is that a tabpanel automatically (on page load) activeTab:'s the first tab and properly sizes based on the content it autoload:'s.

    The problem is that the first tabpanel item doesn't resize after the autoload:'d content is loaded. This is because it can't know the size of content before it is loaded.

    But I am having difficulty understanding how to get that first tabpanel item to callback on it's parent container's doLayout.

    Here is my best attempt:

    HTML Code:
            var secondtiertabs = new Ext.TabPanel({
              activeTab: 0,
              items: [
                new Ext.Panel({
                  title: 'I dont resize to content',
                  autoLoad:{url: 'file1.html', callback:  function(){secondtiertabs.doLayout();}}
                }),
                {
                    title: 'I do!',
                    autoLoad:'file1.html'
                },{
                    title: 'Tab 2',
                    html: 'Another one'
                }
              ]
            });
    This all goes down in a Viewport.

    HTML Code:
            var viewport = new Ext.Viewport
            (
              {
                layout: 'border',
                items: [
                  {
                    region: 'center',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    items:[
                      {
                        title: 'Tab A',
                        items: [
                            secondtiertabs
                        ]
                      }
                    ]
                  }
                ]
              }
            )
          });
    The file1.html is nothing more than lots of <p/>'s

    Thanks in advance!

  2. #2
    Ext JS Premium Member
    Join Date
    Jul 2010
    Location
    UK
    Posts
    524
    Vote Rating
    29
    MrSparks has a spectacular aura about MrSparks has a spectacular aura about

      0  

    Default


    Just a guess but you could try a doLayout()

    This should trigger a resize of the panel......

    Ext.getCmp('myid1').doLayout();

    You might want to add some IDs to the code also.. Untested code (firebug is your friend)

    Code:
    var secondtiertabs = new Ext.TabPanel({
              activeTab: 0,
              items: [
                new Ext.Panel(
                   {
                     title: 'I dont resize to content',
                     id: 'myid1',
                     autoLoad:{url: 'file1.html', callback:  function(){secondtiertabs.doLayout();}}
                   }
               ),
                {
                    title: 'I do!',
                    id: 'myid2',
                    autoLoad:'file1.html'
                },{
                    title: 'Tab 2',
                    id: 'myid3',
                    html: 'Another one'
                }
              ]
            });

  3. #3
    Sencha User Screamy's Avatar
    Join Date
    Jun 2008
    Posts
    244
    Vote Rating
    0
    Screamy is an unknown quantity at this point

      0  

    Default


    Try adding layout: 'fit' to each tab panel.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    rich_andrews is on a distinguished road

      0  

    Default


    MrSparks,

    Very good idea. However it did not result in a solution. I've also tried many of the configurations one could imagine, notable the doLayout() callback, and the various properties such as forceLayout, deferredRender and layoutOnTabChange.

    Here is the whole piece of code. file1.html is also a properly formed html document w/o doctype.

    I'm going to look at exogenous factors such as doctype, HTTP server, and the ExtJS bugs.

    HTML Code:
    <!DOCTYPE html>
    <html>  
      <head>
        <link rel="stylesheet" href="js/ext-3.3.1/resources/css/ext-all.css" type="text/css"/>
        <script type="text/javascript" src="js/ext-3.3.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-3.3.1/ext-all.js"></script>
    
        <script type="text/javascript">
    
          Ext.onReady(function(){
    
            var secondtiertabs = new Ext.TabPanel({
              // specified activeTab does not resize properly when nested in a parent tabpanel
              // however, if activeTab is not set, and user clicks on tab 0, all is well.
              activeTab: 0,
    
              // to no avail
              //layoutOnTabChange:true,
              //deferredRender:false,
              //forceLayout: true,
              items: [
                {
                  id: 'myID',
                  title: 'I dont resize to content',
                  // callback to this cmp does not work
                  autoLoad:{url: 'file1.html', callback:  function(){/*alert("loaded");Ext.getCmp('myID').doLayout();*/}}
                },
                {
                    title: 'I do!',
                    autoLoad:'db/skyline/file1.html'
                }
              ]
            });
    
            var viewport = new Ext.Viewport
            (
              {
                layout: 'border',
                items: [
                  {
                    region: 'center',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    // to no avail
                    //layoutOnTabChange:true,
                    //deferredRender:false,
                    //forceLayout: true,
                    items:[
                      {
                        title: 'Tab A',
                        items: [
                          // If file1.html is the content of the first tab in the parent
                          // tab panel, thinks work nicely.
                          //{
                          //  autoLoad: 'file1.html',
                          //},
                          // first tab in this tab panel won't size properly
                          secondtiertabs
                        ]
                      }
                    ]
                  }
                ]
              }
            )
    
            // can't call this here because of the async autoload in tabpanel
            //Ext.getCmp('myID').doLayout();
    
          });
    
        </script>
      </head>
      <body>
        <p>Viewport failed to render</p>
      </body>
    </html>

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,503
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It will never resize will it?

    It's not a child item, it's just a block of HTML thrown in there.

  6. #6
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    rich_andrews is on a distinguished road

      0  

    Default


    Quote Originally Posted by Screamy View Post
    Try adding layout: 'fit' to each tab panel.
    Ding! So I fell victim to the, "You always have to specify a layout" point usually raised here? Hmm...

    Applying 'layout: fit' to the parent tabpanel tab items is what worked. So what I'm concluding is that the items specified in a tabpanel have to have a layout specified because they do not inherit the TabPanel's layout. Stands to reason, though begs the question about why other tabpanel items function properly when clicked on by the user.

    Thanks a bunch for the help! I'm quite relieved to see things work and hopefully ExtJS continues to speak for itself in our organization.

    Here is the final, wonderfully succinct, functioning code:

    HTML Code:
    <!DOCTYPE html>
    <html>  
      <head>
        <link rel="stylesheet" href="js/ext-3.3.1/resources/css/ext-all.css" type="text/css"/>
        <script type="text/javascript" src="js/ext-3.3.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="js/ext-3.3.1/ext-all.js"></script>
    
        <script type="text/javascript">
    
          Ext.onReady(function(){
    
            var viewport = new Ext.Viewport
            (
              {
                layout: 'border',
                items: [
                  {
                    region: 'center',
                    xtype: 'tabpanel',
                    activeTab: 0,
    
                    items:[
                      {
                        title: 'Tab A',
                        // this item has to have a layout configured.
                        layout: 'fit',
    
                        items: [
                          {
                            xtype:'tabpanel',
                            activeTab: 0,
    
                            items: [
                              {
                                title: 'I dont resize to content if my parent container has no layout',
                                autoLoad:'db/skyline/file1.html'
                              },
                              {
                                title: 'I do!',
                                autoLoad:'db/skyline/file1.html'
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            )
          });
    
        </script>
      </head>
      <body>
        <p>Viewport failed to render</p>
      </body>
    </html>

  7. #7
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    6
    Vote Rating
    0
    rich_andrews is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    It will never resize will it?

    It's not a child item, it's just a block of HTML thrown in there.
    Correct, the content of the first tab of the nested tabpanel would never resize.

Similar Threads

  1. Resizable resize, but doesn't show the panel content[Solved]
    By Daniels in forum Ext 3.x: Help & Discussion
    Replies: 9
    Last Post: 14 Jan 2010, 2:46 AM
  2. Resize a grid in a nested layout in a tabpanel in a viewport!?
    By ashleycoker in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 13 Feb 2009, 9:26 AM
  3. Panel autoLoad doesn't automatically resize within a viewport
    By mharry in forum Ext 2.x: Help & Discussion
    Replies: 12
    Last Post: 21 Oct 2008, 6:20 PM
  4. how to resize a panel to ist container parent(a tabpanel)
    By diego_83 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 31 Jan 2008, 3:54 AM

Thread Participants: 3

Tags for this Thread