PDA

View Full Version : 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:


<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?

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.


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