Results 1 to 3 of 3

Thread: Nested Tabpans displaying really weird

  1. #1

    Default Nested Tabpans displaying really weird

    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:[email protected]">[email protected]</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?

  2. #2
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    707

    Default

    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: [{

  3. #3

    Default

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

Posting Permissions

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