PDA

View Full Version : making a Panel to fill a <div>



gfrancis1@gmail.com
10 Mar 2011, 9:21 AM
Hello, in the below example, I'm trying to get the main panel to fill 'main-div'. Instead, it only has height enough to show the Title bar. I've tried a lot of different things to get this to work - please help me!



<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all-debug-w-comments.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var panel = new Ext.Panel({
layout:'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:15px'
},
items: [ {
title: 'Navigation',
region:'west',
width: 175,
maxSize: 250,
items:[ {xtype:'radio'} ]
},{
title: 'Main Content',
collapsible: false,
region:'center',
items:[ {xtype:'label', html:'<b>hello</b>'} ]
}]
});

new Ext.Panel({
layout: 'fit',
title: 'Inventory Manager',
items: [ panel ]
,renderTo:'main-div'
});

});

</script>

</head>
<body>
<div id='headerDiv'>Header Section</div>
<div id="main-div" style='height: 80%; background-color:#c0c0c0'></div>
<div id='footerDiv'>Footer Section</div>
</body>
</html>

Screamy
10 Mar 2011, 12:03 PM
Eliminate the HTML content in the <body> of your page and start with a simple Viewport and border layout, then add features one by one till you get the desired effect.



<html>
<head>
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
border: false,
collapsible: true,
collapseMode: 'mini',
frame: true,
height: 60,
html: 'North Region Content Here',
title: 'North Region',
margins: '0 0 5 0'
},{
region: 'center',
items: [{
border: false,
html: "Center region content."
}]
},{
region: 'south',
collapsible: true,
collapseMode: 'mini',
frame: true,
height: 60,
html: 'Southern Stuff here',
title: 'South Region',
}]
});

});

</script>

</head>
<body>
</body>
</html>

gfrancis1@gmail.com
10 Mar 2011, 12:23 PM
sorry but I specifically mentioned I wanted to fill a <div>. I know about Viewport, but that can only be used to fill the entire <body>.
I have since learned that in order to do what I'm asking with a Panel, it's necessary to implement an event-handler on the window resize event, ie:


function panelResize()
{
var mainDiv = document.getElementById('main-div');
panel1.setHeight( mainDiv.clientHeight );
panel1.doLayout();
}

Ext.EventManager.onWindowResize(panelResize);

Regards,

emils
10 Mar 2011, 10:56 PM
layout: 'fit' - in each item