PDA

View Full Version : Why won't the width extend 100%



steve.neill
1 Aug 2007, 5:20 PM
Why won't the inner borderlayout region extend its width to 100%? The UI needs to be built with an inner borderlayout to facilitate the swapping in/out of content regions whilst sharing tabs and a toolbar.

Here's a link to show you the problem: http://www.thevine.co.nz/test/ui/test5.html

Can anyone please help?

Thanks,
Steve

Here's the code:



<html>
<head>
<link rel="stylesheet" type="text/css" href="../lib/3rdparty/ext-1.1-rc1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../lib/3rdparty/ext-1.1-rc1/ext-all-debug.js"></script>
<script language="javascript">
function test() {
// create the classic 5-region layout
var mainLayout = new Ext.BorderLayout(
document.body,
{
north: { split: true, initialSize: 50 },
south: { split: true, initialSize: 50 },
east: { split: true, initialSize: 100 },
west: { split: true, initialSize: 100 },
center: { alwaysShowTabs: true, tabPosition: 'top' }
}
);

mainLayout.beginUpdate();

// add content panels
mainLayout.add('north', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
mainLayout.add('south', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
mainLayout.add('east', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));
mainLayout.add('west', new Ext.ContentPanel(Ext.id(), { autoCreate: true, fitToFrame: true, closable: false }));

// add content panels (content categories) to the 'center' region
var cp1 = new Ext.ContentPanel(Ext.id(), { autoCreate: true, title: 'content category 1' });
mainLayout.add('center', cp1);

// add content panels (content categories) to the 'center' region
var cp2 = new Ext.ContentPanel(Ext.id(), { autoCreate: true, title: 'content category 2' });
mainLayout.add('center', cp2);

// add a toolbar to the 'center' region tab
// (note: the toolbar will eventually host dropdown hierachical menus)
var tb1 = new Ext.Toolbar(Ext.DomHelper.append(cp1.el, { tag: 'div' }, true));
tb1.addButton({ text: 'content menu 1' });
tb1.addButton({ text: 'content menu 2' });
tb1.addButton({ text: 'content menu 3' });

mainLayout.getRegion('center').getTabs().getTab(0).activate();

// create an area for flexible BorderLayout content
var content = Ext.DomHelper.append(cp1.el, { tag: 'div' }, true);

// define a BorderLayout for the tabs 'content' area.
// This content area needs regions because we'll be swapping
// content in and out using the the remove() and add() methods.
var layout1 = new Ext.BorderLayout(
content,
{
center: { // <-- this region will be removed (preserved) and re-added as we switch between content using the toolbar
titleBar: true,
title: "< -- why won't region go full width? -- >"
}
}
);

// the inner content may comprise of a single panel or multiple panels
// Question: Why doesn't the Panel resize to the width of the 'content' div?
var panel1 = new Ext.NestedLayoutPanel(
layout1,
{
fitContainer: true, // <-- appears to have no effect
fitToFrame: true // <-- appears to have no effect
}
);

// here's an example of a content block we will swap in and out (we call it a workspace)
var wsBorderLayout = new Ext.BorderLayout(
Ext.DomHelper.append(layout1.getRegion('center').bodyEl, { tag: 'div' }),
{
north: { split: true, initialSize: 100, titleBar: true, title: 'workspace panel 1' },
center: { titleBar: true, title: 'workspace panel 2'}
}
);
var wsLayoutPanel = new Ext.NestedLayoutPanel(wsBorderLayout);
layout1.getRegion('center').add(wsLayoutPanel);


mainLayout.endUpdate();
}
</script>
</head>
<body onload="test()">
</body>
</html>

jay@moduscreate.com
1 Aug 2007, 5:59 PM
You're setting the main container to 200px.
<div id="ext-gen109" class="x-layout-panel x-layout-panel-center" style="left: 0px; top: 0px; width: 200px; height: 200px;">

steve.neill
1 Aug 2007, 6:40 PM
I see what you mean, but that's nothing I'm doing. I just downloaded a clean 1.1 version and the same thing happens. For some reason the width style is being set to 200px somewhere.

steve.neill
2 Aug 2007, 8:06 AM
The following code snippet resolved this issue.



:
:
mainLayout.endUpdate();
layout1.layout();