Mysterious object when creating layout?? [Archive]

michael.prichard

24 Apr 2007, 12:53 PM

This is my code:

<html>
<head>
<title>My Layout</title>
<link rel="stylesheet" type="text/css" href="assets/ext-1.0/resources/css/ext-all.css"/>

<script type="text/javascript" src="assets/ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="assets/ext-1.0/adapter/yui/ext-yui-adapter.js"></script>

<script type="text/javascript" src="assets/ext-1.0/ext-all.js"></script>



<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
#footer {
background-color: #c3daf9;
}
#nav {
background-color: #c3daf9;
}
#content p {
margin:5px;
}
#nav li {
padding:2px;
padding-left:10px;
background-image:url(images/bullet.gif);
background-position: -3px 6px;
background-repeat: no-repeat;
font-size:8pt;
display: block;
}
.x-layout-panel{
border:0px none;
}
</style>
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 30
},
center: {
split:false,
autoScroll:false
},
south: {
split:false,
initialSize: 50,
titlebar: false,
collapsible: false,
animate: false
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('nav', {title: 'Menubar', fitToFrame:true}));
layout.add('south', new Ext.ContentPanel('footer', {title: 'Footer', fitToFrame:true}));

var innerLayout = new Ext.BorderLayout('content', {
center: {
autoScroll:true
},
south: {
split:true,
initialSize: 400,
minSize: 20,
autoScroll:true,
collapsed:true,
collapsible:true,
titlebar: true
}

});

innerLayout.add('center', new Ext.ContentPanel('list', {title: 'List', fitToFrame:true }));
innerLayout.add('south', new Ext.ContentPanel('preview', {title: 'Preview' }));
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
layout.endUpdate();
}
};

}();
Ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>


<div id="nav" class="x-layout-inactive-content" >
test
</div>

<div id="content" class="x-layout-inactive-content" >
</div>

<div id="list" class="x-layout-inactive-content" >
list stuff
</div>

<div id="preview" class="x-layout-inactive-content" >
preview pane
</div>

<div id="footer" class="x-layout-inactive-content" >
this is a footer
</div>


</body>

</html>

Now notice this mysterious thing on the page....

http://dev.merazzo.com/mysterySpot.png

Any ideas where it is coming? It seems I can put my mouse over it and it looks like another panel.

Thanks!
Michael

brian.moeskau

24 Apr 2007, 1:04 PM

Looks like it might be a resize handle. You should inspect it in Firebug (or view source) and see what the actual markup is.

michael.prichard

24 Apr 2007, 1:52 PM

great! Firebug was a perfect way to isolate it.

I had to set split:false in my settings for the innerLayout south section. Once I did that it went away.

Thanks!!