Nested Tabpans displaying really weird

**roadmixer** · 9 Mar 2009, 10:18 AM

I've got this problem with nested border layouts not handling auto height like I'd expect.
I thought height: 'auto' was default. Here's the code:

Code:

<html>
<head>

<script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="ext-2.2/ext-all-debug.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = 'ext-2.2/resources/images/default/s.gif';</script>

<link rel="stylesheet" type="text/css" href="ext-2.2/resources/css/ext-all.css" />

</head>
<body>

<div id="templateNorth"  class="x-hidden">Application Title</div>

<div style="margin: 0 0 0em 0; " id="mainmenu">Menu goes here</div>

<div class="x-hidden" id="logo"></div>

<div class="x-hidden" id="pageTitle"><h1>Page Title</h1></div>

<div id="leadContent_0">
Lead 0 information goes here
<table>
<tr><td> 1 data</td><td>data</td></tr>
<tr><td> 2 data</td><td>data</td></tr>
<tr><td> 3 data</td><td>data</td></tr>
<tr><td> 4 data</td><td>data</td></tr>
<tr><td> 5 data</td><td>data</td></tr>
<tr><td> 6 data</td><td>data</td></tr>
<tr><td> 7 data</td><td>data</td></tr>
<tr><td> 8 data</td><td>data</td></tr>
<tr><td> 9 data</td><td>data</td></tr>
<tr><td>10 data</td><td>data</td></tr>
<tr><td>11 data</td><td>data</td></tr>
<tr><td>12 data</td><td>data</td></tr>
<tr><td>13 data</td><td>data</td></tr>
<tr><td>14 data</td><td>data</td></tr>
<tr><td>15 data</td><td>data</td></tr>
<tr><td>16 data</td><td>data</td></tr>
<tr><td>17 data</td><td>data</td></tr>
<tr><td>18 data</td><td>data</td></tr>
<tr><td>19 data</td><td>data</td></tr>
<tr><td>20 data</td><td>data</td></tr>
<tr><td>21 data</td><td>data</td></tr>
<tr><td>22 data</td><td>data</td></tr>
<tr><td>23 data</td><td>data</td></tr>
<tr><td>24 data</td><td>data</td></tr>
<tr><td>25 data</td><td>data</td></tr>
<tr><td>26 data</td><td>data</td></tr>
<tr><td>27 data</td><td>data</td></tr>
<tr><td>28 data</td><td>data</td></tr>
<tr><td>29 data</td><td>data</td></tr>
<tr><td>30 END</td><td>data</td></tr>
</table>
</div>

<div id="leadContent_1">Lead 1 information goes here</div>

<div id="templateSouth"  class="x-hidden">Footer, such as copyright.</div>

<script type="text/javascript">
 
Ext.QuickTips.init();

Ext.onReady(function() {

var jobNorth_0 = new Ext.Panel({
  layout: 'table'
  , style: 'padding: 4px 0 4px 8px'
  , height: 36
  , border: false
  , layoutConfig: {columns: 2}
  , region: 'north'  
  , items: [
    {xtype: 'label', html: 'Company Rep.: Blah Foo, <a href="mailto:blahfoo@gmail.com">blahfoo@gmail.com</a>, null'}
    , {
      xtype: 'button'
      , text: 'Edit Company Rep'
      , style: 'margin-left: 1em'
      , handler: function() { document.location = "editSalesperson.storm?version=11&id=30106&jobId=0&tab=main" ; }
    }
  ]
});

var jobNorth_1 = new Ext.Panel({
  layout: 'table'
  , style: 'padding: 4px 0 4px 8px'
  , height: 36
  , border: false
  , layoutConfig: {columns: 2}
  , region: 'north'  
  , items: [
    {xtype: 'label', html: 'Company Rep.: Unassigned'}
    , {
      xtype: 'button'
      , text: 'Edit Company Rep'
      , style: 'margin-left: 1em'
      , handler: function() { document.location = "editSalesperson.storm?version=11&id=30106&jobId=0&tab=main" ; }
    }
  ]
});

new Ext.Viewport({
  id: 'mainViewport',
  layout: 'border',
    items: [
      {
        region: 'north'
        ,border: false
        ,contentEl: 'templateNorth'
      }
      ,
      {
        region: 'south'
        ,border: false
        ,contentEl: 'templateSouth'
      }
      ,
      {
        region: 'center'
        ,layout: 'border'
        , border: false
        ,items: [
          {
            region: 'north'
            ,border: false
            ,contentEl: 'pageTitle'
          }
          ,
          {
            xtype: 'tabpanel'
            , region: 'center'
            , style: 'background: green; padding: 3px 6px 6px 6px;'
            , activeTab: 0
            , hideMode: 'offsets'
            , layoutOnTabChange: true
            , plain: true
            , items: [
              {
                title: 'Job 0'
                , items: [{
                  xtype: 'panel'
                  , id: 'jobPanel_0'
                  , border: true
                  // How do we make it fill up all available space?
                  , layout: 'border'
                  , style: 'background: red; padding: 6px 6px 6px 6px'
                  , items: [
                    jobNorth_0
                    , {
                      xtype: 'tabpanel'
                      , activeTab: 0
                      , border: false
                      , hideMode: 'offsets'
                      , layoutOnTabChange: true
                      , id: 'tabPanel0'
                      , region:'center'
                      , plain:true
                      , items:[
                        {
                          title: 'Progress Summary'
                          , items:[{xtype: 'label', text: 'progress summary goes here'}]
                        }
                        , {
                          title: 'Lead'
                          , autoScroll: true
                          , items:[{
                            xtype: 'panel'
                            , border: false
                            , contentEl: 'leadContent_0'
                          }]
                        }
                      ]
                    }
                  ]
                }]
              }
              ,
              {
                title: 'Job 1'
                , items: [{
                  xtype: 'panel'
                  , id: 'jobPanel_1'
                  , border: true
                  // I want this to take up all available space -- right up to the footer
                  , layout: 'border'
                  , style: 'background: red; padding: 6px 6px 6px 6px'
                  , items: [
                    jobNorth_1
                    , {
                      xtype: 'tabpanel'
                      , activeTab: 0
                      , border: false
                      , hideMode: 'offsets'
                      , layoutOnTabChange: true
                      , id: 'tabPanel1'
                      , region:'center'
                      , plain:true
                      , items:[
                        {
                          title: 'Progress Summary'
                          , items:[{xtype: 'label', text: 'progress summary goes here'}]
                        }
                        , {
                          title: 'Lead'
                          , autoScroll: true
                          , items:[{
                            xtype: 'panel'
                            , border: false
                            , contentEl: 'leadContent_1'
                          }]
                        }
                      ]
                    }
                  ]
                }]
              }
              , {title: '+ New'}
          ]}
        ]
      }
    ]
});

});

</script>


</body>

</html>

I set the background of the 2 tab panels to different colors so its easy to see where things are going wonky.
Why is the inner tabpanel all shrunk up and not filling the parent panel? If I set an explicit height, it displays, but I want it to fill everything except for padding. I've tried "height: '100%'" and that did nothing (as I figured it wouldn't).

Any help?

**carol.ext** · 9 Mar 2009, 11:42 AM

You have a number of panels with no layout specified. Probably over-nested. Example shown below, do you really need another panel to add the title 'Job 0'? If you do, it needs a layout.

Code:

  xtype: 'tabpanel'
            , region: 'center'
            , style: 'background: green; padding: 3px 6px 6px 6px;'
            , activeTab: 0
            , hideMode: 'offsets'
            , layoutOnTabChange: true
            , plain: true
            , items: [
              {
                title: 'Job 0'
                , layout: 'fit' // e.g. layout missing here
                , items: [{

**roadmixer** · 9 Mar 2009, 11:55 AM

perfect, that was actually the omission I had made, thank you.
/bow thankyou

Thread: Nested Tabpans displaying really weird

Thread Tools

Search Thread

Display

Nested Tabpans displaying really weird

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News