PDA

View Full Version : Layout: Border



ohnam
4 Aug 2010, 1:41 PM
I'm trying to do a border layout but how do I see the Panel to be 100% height of its container?


Snippet var myBorderPanel = new Ext.Panel({
renderTo: "foo",
width: "100%",
title: 'AMS 360',
layout: 'border',
items:
[{
// xtype: 'panel' implied by default
title: '',
region: 'west',
id: "west",
margins: '5 0 0 0',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 0', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
minSize: 100,
maxSize: 250,
contentEl : "west",
xType: "container"
},
{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0',
contentEl : "center",
xType : "container"
}

]
});


I have been to the examples section of sencha (Snippet var myBorderPanel = new Ext.Panel({
renderTo: "foo",
width: "100%",
title: 'AMS 360',
layout: 'border',
height: '100%',
items:
[{
// xtype: 'panel' implied by default
title: '',
region: 'west',
id: "west",
margins: '5 0 0 0',
width: 200,
collapsible: true, // make collapsible
cmargins: '5 5 0 0', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
minSize: 100,
maxSize: 250,
contentEl : "west",
xType: "container"
},
{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0',
contentEl : "center",
xType : "container"
}

]
});

I have been to Snippet var myBorderPanel = new Ext.Panel({
renderTo: "foo",
width: "20%",
title: 'AMS 360',
layout: 'border',
items:
[{
// xtype: 'panel' implied by default
title: '',
region: 'west',
id: "west",
margins: '5 0 0 0',
width: 50,
collapsible: true, // make collapsible
cmargins: '5 5 0 0', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
minSize: 100,
maxSize: 250,
contentEl : "west",
xType: "container"
},
{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0',
contentEl : "center",
xType : "container"
}

]
});
[/CODE]

What else do I need to do to make this panel 100%?

darthwes
4 Aug 2010, 8:06 PM
layout:'fit' on the parent container.

ohnam
5 Aug 2010, 8:24 AM
Darthwes I am confused. Right now foo is my parent container and its just a div element with height set to 100%. Are you saying that foo need to be another type of layout container?

So this is the html I have:


<body>
<div id="foo" style="height:100%">
<div id="west"></div>
<div id="center"></div>
</div>
</body> I thought by setting renderTo to foo that the border layout will inhereit the parent height and width, am I wrong?

darthwes
5 Aug 2010, 8:59 AM
<div height="100%" style="background-color: green;">
<div style="background-color: red;"> Yes </div>
<div style="background-color: yellow;"> No </div>
</div>


See any green?

----

OK, I see, you put it in the style tag, hang on.

In your EXT code where you renderTo: "foo", if you add "layout: 'fit'" does it work or not?

ohnam
5 Aug 2010, 9:07 AM
It does not. I inspect the elements using a dom inspector and "foo" has a height of 808px but the panel only has a height of 54px. So foo inhereits the parent height but the panel does not.

Animal
5 Aug 2010, 12:51 PM
Use NO html at all.

Create a Viewport if you want to manage the whole page a layout! This is common knowledge by now.

darthwes
5 Aug 2010, 3:42 PM
"Don't use (contentEl|applyTo|renderTo}" is the best solution, I concur.

On the other hand, what's the point of renderTo/applyTo? You're saying what it does is chop out the layout manager for the component (and I assume all child components) in favor of using the browser-determined-layout?

Animal
5 Aug 2010, 9:28 PM
Use a Viewport.

ohnam
6 Aug 2010, 10:52 AM
Thank you for the help all and viewport is the key. The examples in the api documentation needs to be updated or something because it uses panel for the example for a border layout but it really should show the viewport.

Animal
6 Aug 2010, 10:02 PM
The type of Container to which you apply a border layout is completely irrelevant.

if you want to have a border layout Panel, use a border layout Panel.

If you want to encapsulate the document body, use a Viewport. With ANY layout.

They are not related.