rojar
20 Feb 2007, 6:28 AM
Using complex layout. Problem I am facing is when using nested layouts in north region of layout.
Extera space after the toolbar is shown. Why?
In the north region I have two nested panels north for showing some test and center fo rshowing
toolbar. But I don't know why extera space is shown below center region.
My code goes like this
<html>
<head>
<title>Complex Layout</title>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<script type="text/javascript" src="../../yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css"/>
<script language="javascript" src="../grid/PropsGrid.js"></script>
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
.ylayout-panel-north {
border:0px none;
background-color:#c3daf9;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
.ylayout-panel-center p {
margin:5px;
}
#props-panel .ygrid-col-0{
}
#props-panel .ygrid-col-1{
}
</style>
<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 90,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
collapsible: true
}
});
var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
// bogus object as a data source
propsGrid.setSource({
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
});
propsGrid.render();
layout.beginUpdate();
var mainToolbar = new YAHOO.ext.Toolbar('userAssignmentPanel-tb');
mainToolbar.addButton({text:'Edit Selected Item', tooltip:'Edit Selected Item', className:'edit-btn'});
mainToolbar.addButton({text:'New Search', tooltip:'New Search', className:'search-btn'});
mainToolbar.addButton({text:'Saved Searches', tooltip:'Saved Searches', className:'search-btn'});
mainToolbar.addButton({text:'Displays', tooltip:'Displays', className:'view-btn'});
mainToolbar.addButton({text:'Edit Attributes', tooltip:'Edit Attributes', className:'edit-btn'});
mainToolbar.addButton({text:'Saved Attributes', tooltip:'Edit Attributes', className:'edit-btn'});
innerLayoutNorth= new YAHOO.ext.BorderLayout('north', {
center: {
split:false,
animate: true,
initialSize: 46,
minSize: 46
},
north: {
initialSize: 34,
}
});
innerLayoutNorth.add('north', new YAHOO.ext.ContentPanel('title'));
innerLayoutNorth.add('center', new YAHOO.ext.ContentPanel('toolbar'));
var northPanel = new YAHOO.ext.NestedLayoutPanel(innerLayoutNorth,{title: 'North ToolBar', closable: false, toolbar:mainToolbar, fitToFrame:true} );
layout.add('north', northPanel);
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();
},
toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<div id="container">
<div id="west" class="ylayout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" style="float: left; margin-bottom: 10px; top:0px; padding-top:0px; left:0px; padding-left:0px">
<div id="title">
Why extera space is shown below toolbar
in north region.
</div>
<div id="toolbar">
<div id="userAssignmentPanel-tb" style="top:0px; padding-top:0px"></div>
</div>
</div>
<div id="autoTabs" class="ylayout-inactive-content">
The layout manager will automatically create and/or remove the
TabPanel component when a region has more than one panel. Close one
of my panels and you can see what I mean.
</div>
<div id="center2" class="ylayout-inactive-content">
hello in center 2
</div>
<div id="center1" class="ylayout-inactive-content">
hello in center 1
</div>
<div id="props-panel" class="ylayout-inactive-content"
style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="ylayout-inactive-content">
south - generally for informational stuff, also could be for status
bar
</div>
</div>
</body>
</html>
What showld I do now
:shock:
Thanks :)
Extera space after the toolbar is shown. Why?
In the north region I have two nested panels north for showing some test and center fo rshowing
toolbar. But I don't know why extera space is shown below center region.
My code goes like this
<html>
<head>
<title>Complex Layout</title>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<script type="text/javascript" src="../../yui-ext.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/layout.css"/>
<link rel="stylesheet" type="text/css" href="../../resources/css/grid.css"/>
<script language="javascript" src="../grid/PropsGrid.js"></script>
<style type="text/css">
body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
.ylayout-panel-north {
border:0px none;
background-color:#c3daf9;
}
#nav {
}
#autoTabs, #center1, #center2, #west {
padding:10px;
}
#north, #south{
font:normal 8pt arial, helvetica;
padding:4px;
}
.ylayout-panel-center p {
margin:5px;
}
#props-panel .ygrid-col-0{
}
#props-panel .ygrid-col-1{
}
</style>
<script type="text/javascript">
Example = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 90,
titlebar: false
},
west: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:true,
initialSize: 100,
minSize: 100,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
center: {
titlebar: true,
autoScroll:true,
collapsible: true
}
});
var propsGrid = new YAHOO.ext.grid.PropsGrid('props-panel');
// bogus object as a data source
propsGrid.setSource({
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": .01,
"borderWidth": 1
});
propsGrid.render();
layout.beginUpdate();
var mainToolbar = new YAHOO.ext.Toolbar('userAssignmentPanel-tb');
mainToolbar.addButton({text:'Edit Selected Item', tooltip:'Edit Selected Item', className:'edit-btn'});
mainToolbar.addButton({text:'New Search', tooltip:'New Search', className:'search-btn'});
mainToolbar.addButton({text:'Saved Searches', tooltip:'Saved Searches', className:'search-btn'});
mainToolbar.addButton({text:'Displays', tooltip:'Displays', className:'view-btn'});
mainToolbar.addButton({text:'Edit Attributes', tooltip:'Edit Attributes', className:'edit-btn'});
mainToolbar.addButton({text:'Saved Attributes', tooltip:'Edit Attributes', className:'edit-btn'});
innerLayoutNorth= new YAHOO.ext.BorderLayout('north', {
center: {
split:false,
animate: true,
initialSize: 46,
minSize: 46
},
north: {
initialSize: 34,
}
});
innerLayoutNorth.add('north', new YAHOO.ext.ContentPanel('title'));
innerLayoutNorth.add('center', new YAHOO.ext.ContentPanel('toolbar'));
var northPanel = new YAHOO.ext.NestedLayoutPanel(innerLayoutNorth,{title: 'North ToolBar', closable: false, toolbar:mainToolbar, fitToFrame:true} );
layout.add('north', northPanel);
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center1');
layout.getRegion('west').hide();
layout.endUpdate();
},
toggleWest : function(link){
var west = layout.getRegion('west');
if(west.isVisible()){
west.hide();
link.innerHTML = 'Show West Region';
}else{
west.show();
link.innerHTML = 'Hide West Region';
}
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
</script>
</head>
<body>
<div id="container">
<div id="west" class="ylayout-inactive-content">
Hi. I'm the west panel.
</div>
<div id="north" style="float: left; margin-bottom: 10px; top:0px; padding-top:0px; left:0px; padding-left:0px">
<div id="title">
Why extera space is shown below toolbar
in north region.
</div>
<div id="toolbar">
<div id="userAssignmentPanel-tb" style="top:0px; padding-top:0px"></div>
</div>
</div>
<div id="autoTabs" class="ylayout-inactive-content">
The layout manager will automatically create and/or remove the
TabPanel component when a region has more than one panel. Close one
of my panels and you can see what I mean.
</div>
<div id="center2" class="ylayout-inactive-content">
hello in center 2
</div>
<div id="center1" class="ylayout-inactive-content">
hello in center 1
</div>
<div id="props-panel" class="ylayout-inactive-content"
style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="ylayout-inactive-content">
south - generally for informational stuff, also could be for status
bar
</div>
</div>
</body>
</html>
What showld I do now
:shock:
Thanks :)