PDA

View Full Version : BorderLayout (strict html and container div)


timzam
21 Jun 2007, 7:09 PM
The example below doesn't look properly in Firefox2 and IE7.

The example is taken from "Tutorial:Using Layouts with Ext - Part 1" and there were two changes.

1) 4.01 strict html doctype added.
2) divs were put in a container div.

If you do only one of these changes, everything is fine.

In 1.1-beta1 it's the same thing.


Timur


simple.html:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext-1.0.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.0.1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.0.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="simple.js"></script>
</head>
<!--
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext-1.1-beta1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-1.1-beta1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext-1.1-beta1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.1-beta1/ext-all-debug.js"></script>
<script type="text/javascript" src="simple.js"></script>
</head>
-->
<body>
<div id="container-div">
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div"></div>
</div>
</body>
<!--
<body>
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div"></div>
</body>
-->
</html>



simple.js:



Simple = function() {
return {
init : function() {
var mainLayout = new Ext.BorderLayout(
'container-div'
// document.body
, {
north: { split: true, initialSize: 50 },
south: { split: true, initialSize: 50 },
east: { split: true, initialSize: 100 },
west: { split: true, initialSize: 100 },
center: { }
});
mainLayout.beginUpdate();
mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false }));
mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false }));
mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false }));
mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false }));
mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true }));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);
jack.slocum
22 Jun 2007, 5:10 AM
BorderLayout will adjust to fit your container div. Since your container div has no size defined, I would imagine it wouldn't look right.

If you are rendering into a dv, that div will need to be positioned in order to allow positioning child elements (position:relative) and will need to have a size that BorderLayout can use to fill.
timzam
22 Jun 2007, 6:46 AM
Sorry. I remember reading about setting the size of a div but in this context since it looked fine without any doctype I didn't think of it.

Thanks for your help!


Timur