PDA

View Full Version : renderTo, applyTo help



5 Dec 2010, 10:12 AM
Im trying to contruct a GUI where I want to have a html header and a html footer

e.g.

<body>

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

</body>

I want ext js to render everthing into the main div, but I cant seem to get this working correctly


Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new MyViewport({
renderTo: 'main',
layout: 'border'

});
cmp1.show();
});


This works as expected however the header and footer overlay the tabs that I have in my viewport, see images attached

The CSS I have is as follows

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bps_w1.xds</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="MyViewport.ui.js"></script>
<script type="text/javascript" src="MyViewport.js"></script>
<script type="text/javascript" src="MainTabPanel.ui.js"></script>
<script type="text/javascript" src="MainTabPanel.js"></script>
<script type="text/javascript" src="AdminSubTabPanel.ui.js"></script>
<script type="text/javascript" src="AdminSubTabPanel.js"></script>
<script type="text/javascript" src="UserGrid.ui.js"></script>
<script type="text/javascript" src="UserGrid.js"></script>
<script type="text/javascript" src="UserStore.js"></script>
<script type="text/javascript" src="xds_index.js"></script>
<style type="text/css">
#header {
background: blue;
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#main {
position: absolute;
top: 100px;
width: 500px;
}
#footer {
background: red;
height: 100px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
</style>

</head>
<body>

<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>

</body>
</html>


Does anyone know why the header and footer display above the extjs gui?

Interesting thing is that when I change the renderTo to applyTo then then the tabs display but the grid and the contents inside the tabs is broken?

mankz
5 Dec 2010, 10:18 AM
A viewport doesn't require any renderTo/applyTo so delete that, and also no need to call show on it. Might solve it :)

5 Dec 2010, 10:21 AM
The ext designer code that was generated originally had a renderTo parameter - i changed the getBody() to 'main' - also there is a show() already?


* File: xds_index.js
* Date: Sat Dec 04 2010 10:38:18 GMT+0000 (GMT Standard Time)
*
* This file was generated by Ext Designer version xds-1.0.2.14.
* http://www.extjs.com/products/designer/
*
* This file will be auto-generated each and everytime you export.
*
* Do NOT hand edit this file.
*/

Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new MyViewport({
renderTo: Ext.getBody()
});
cmp1.show();
});

mankz
5 Dec 2010, 10:25 AM
This should be enough:


Ext.onReady(function() {
Ext.QuickTips.init();
var cmp1 = new MyViewport({});
});

5 Dec 2010, 10:31 AM
Yeah thats cool, its enough to show the viewport but doesn't resolve the header and footer areas overlaying the viewport?

also i'm a noob to extjs hence Im using ext designer - which generated the renderTo and cmp.show() - should I ditch designer and try to do this by hand - I know I'd probably learn better but Im short on time !

If I change the height of the header and footer to be less, I get to see more of the tabs - but thats not what I really want - I want a small header area and a small footer area


<style type="text/css">
#header {
background: blue;
height: 50px;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#main {
position: absolute;
top: 100px;

}
#footer {
background: red;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
</style>

mankz
5 Dec 2010, 10:44 AM
Might be better to ask in the Ext Designer forum... Not sure what's going on :)

mitchellsimoens
5 Dec 2010, 11:13 AM
Why do you need to use Viewport if you want to keep existing header and footer? Viewport should be taking up the entire screen. If you just want a Panel in the 'main' div then use Panel and not Viewport.