PDA

View Full Version : Fit a ViewPort to div



wpanessi
8 Aug 2009, 8:12 AM
Hi, I new in ExtJs.
I've need draw an viewport but this will be fit to a region in the page how can do it?
I try rederTo: a div but do not work property becouse witdh is expand to all page...
Sorry if my question is fool..
Sorry for my english too... :s

Animal
8 Aug 2009, 8:44 AM
Viewport encapsulates the document body.

It manages regions of the page (if you configure it layout: 'border' which is the usual way)

wpanessi
9 Aug 2009, 4:41 PM
Thanks Animal.
What alternatives do I have to do something similar but without using viewport? I can not put a viewport within a panel and that it conforms to a div?
Thank again


Viewport encapsulates the document body.

It manages regions of the page (if you configure it layout: 'border' which is the usual way)

Animal
9 Aug 2009, 9:27 PM
If you really must use an isolated island of Ext within a flat HTML page, use the following override with its el configured as the DIV.

Use this override:



Ext.override(Ext.Viewport, {
initComponent : function() {
Ext.Viewport.superclass.initComponent.call(this);
this.el = Ext.get(this.el) || Ext.getBody();
this.el.dom.parentNode.className += ' x-viewport';
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
}
})

Condor
9 Aug 2009, 11:50 PM
Does that actually work? If yes, then that would be an interesting solution.

I would have just recommended to use a container with the FitToParent plugin.

Animal
10 Aug 2009, 12:19 AM
It should work!;)

Animal
10 Aug 2009, 12:20 AM
I thought of that, but this would be a more generalized solution to "islands" of Ext in web 1.0 pages.

Animal
10 Aug 2009, 12:30 AM
Does that actually work? If yes, then that would be an interesting solution.

I would have just recommended to use a container with the FitToParent plugin.

Heh! this works beautifully.

Drop this into examples/layout as ext-island.html:



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

<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

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

<!-- EXAMPLES -->
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript">

Ext.override(Ext.Viewport, {
initComponent : function() {
Ext.Viewport.superclass.initComponent.call(this);
this.el = Ext.get(this.el) || Ext.getBody();
if (this.el.dom === document.body) {
this.el.dom.parentNode.className += ' x-viewport';
}
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
}
});

Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
el: "ext-island",
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit', // specify layout manager for items
items: // this TabPanel is wrapped by another Panel so the title will be applied
new Ext.TabPanel({
border: false, // already wrapped so don't add another border
activeTab: 1, // second tab initially active
tabPosition: 'bottom',
items: [{
html: '<p>A TabPanel component can be a region.</p>',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel', // see Ext.getCmp() below
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [{
contentEl: 'west',
title: 'Navigation',
border: false,
iconCls: 'nav' // see the HEAD section for style used
}, {
title: 'Settings',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}]
},
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
new Ext.TabPanel({
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: 'Close Me',
closable: true,
autoScroll: true
}, {
contentEl: 'center2',
title: 'Center Panel',
autoScroll: true
}]
})]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
});
</script>
</head>
<body>
<div id="ext-island" style="width:50%;margin-left:25%;margin-top:50px;height:500px">
<!-- use class="x-hide-display" to prevent a brief flicker of the content -->
<div id="west" class="x-hide-display">
<p>Hi. I'm the west panel.</p>
</div>
<div id="center2" class="x-hide-display">
<a id="hideit" href="#">Toggle the west region</a>
<p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
<p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
<p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
<p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="center1" class="x-hide-display">
<p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
<p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
<p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
<p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
<p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
</div>
<div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" class="x-hide-display">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>
</div>
</body>
</html>

Condor
10 Aug 2009, 12:52 AM
1. Shouldn't you use applyTo instead of renderTo?
2. It should probably only add x-viewport to the parent if the el is the body.
3. I tried to use this in a <td> of a table and noticed that position:'relative' didn't work (it required position:'absolute').

Animal
10 Aug 2009, 1:01 AM
I think the renderTo property must be set for smoe obscure internal reason. It does not actually render because it uses the configured el. It just needs the property set.

So you recommend setting the position of this.el to 'absolute' if it is not the body?

Condor
10 Aug 2009, 1:28 AM
So you recommend setting the position of this.el to 'absolute' if it is not the body?

No, I don't think this needs to be a general rule.

I just tried your example inside a table and the border layout regions ended up at (0, 0) instead of the cell coordinates even though the <td> element was position:relative (from x-border-layout-ct).

Must be some weird table positioning bug...

Animal
10 Aug 2009, 1:38 AM
The whole point of a Viewport is it encapsulates and element which provides sizing.

Tables do not provide sizing unless styled with table-layout: fixed

Tables usually stretch to accomodate content.

Condor
10 Aug 2009, 1:57 AM
I used this markup:

<table style="width:100%;height:100%;">
<thead><tr>
<td colspan="3" style="width:100%;height:25%;">North</td>
</tr></thead>
<tbody><tr>
<td style="width:25%;height:50%;">East</td>
<td id="ext-island" style="width:50%;height:50%;">...</td>
<td style="width:25%;height:50%;">West</td>
</tr></tbody>
<tfoot><tr>
<td colspan="3" style="width:100%;height:25%;">South</td>
</tr></tfoot>
</table>

Animal
10 Aug 2009, 2:11 AM
That works very nicely with the addition of position: absolute to the ext-island td

Maybe it will have to test for the element being a TD and add the style?

Condor
10 Aug 2009, 2:14 AM
I just don't know why the position:absolute is needed. Do you know of some kind of exception to css positioning regarding tables?

Animal
10 Aug 2009, 2:26 AM
or position: fixed!

Animal
10 Aug 2009, 2:27 AM
Tables are handled strangely. And inconsistenly between browsers.

That THEAD doesn't get sized on Chrome. There's no 25% top region.

Really, you should lay your page out using modern CSS and divs even if yuo are giong to use an Ext island in one of them.

wpanessi
10 Aug 2009, 4:42 AM
I drag and drop your initial code in Ext.orReady and the result was :
1 - The header is visible (not before as was the viewport is put on).
2 - The body is only the "center" but not the menu located at the "west" but this is set to the DIV.
3 - footer (another part of the html plane) disappeared.

Here is may page ...

<body background="images/fondo/fondo.png">
<table width="100%" border="0" cellspacing="0">
<tr>
<td>&nbsp;</td>
<td width="990" height="20">
<div id="User" align="right"><strong>Usuario : <?php echo($UserName); ?></strong></div>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="990" height="58" background="images/fondo/encabezado.png">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td height="30" background="images/fondo/bk_cuerpo.png">
<table width="100%" border="0" cellspacing="0">
<tr>
<td height="100%">&nbsp;</td>
<td width="770">&nbsp;</td>
<td width="4">&nbsp;</td>
<td width="196"><div id="divUser"></div></td>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td background="images/fondo/bk_cuerpo.png">
<table width="100%" border="0" cellspacing="0">
<tr>
<td height="100%">&nbsp;</td>
<td width="970"><div id="divAppl"></div></td> Here must be viewport
<td>&nbsp;</td>
</tr>
</table>

</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td background="images/fondo/bk_cuerpo.png"></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height="20">&nbsp;</td>
<td height="20" background="images/fondo/ft_top.png">&nbsp;</td>
<td height="20">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td height="40" background="images/fondo/ft_medio.png">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td background="images/fondo/ft_final.png">&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
I think the renderTo property must be set for smoe obscure internal reason. It does not actually render because it uses the configured el. It just needs the property set.

So you recommend setting the position of this.el to 'absolute' if it is not the body?

Animal
10 Aug 2009, 4:44 AM
try laying your page out using CSS instead of tables.

wpanessi
10 Aug 2009, 4:56 AM
Yes, I'm sorry but I do not see yours next post ...
Your example for Ext "Island" is very educational. Thank you very much.

Im try aply to my own need.

Thanks again (to both, Condor too).


try laying your page out using CSS instead of tables.

steffenk
10 Aug 2009, 4:57 AM
Hi Animal,

as i'm very interested in your solution i tried with a simple page using divs and a border layout.

result looks really strange, have a look:
http://dev.sk-typo3.de/ext/viewport.html

Did i missed something?

Condor
10 Aug 2009, 5:04 AM
2 problems:
1. Animals code probably shouldn't be adding the x-viewport class if the el isn't the body.
2. Your mvp div is just too small. Give it a width and height (it won't size to fit the content!).

steffenk
10 Aug 2009, 5:07 AM
Hi Condor, and bingo :)

I updated the example, works like a charm :)

Animal
10 Aug 2009, 5:13 AM
You're probably right. I think it might be better with



Ext.override(Ext.Viewport, {
initComponent : function() {
Ext.Viewport.superclass.initComponent.call(this);
this.el = Ext.get(this.el) || Ext.getBody();
if (this.el.dom === document.body) {
this.el.dom.parentNode.className += ' x-viewport';
}
this.el.setHeight = Ext.emptyFn;
this.el.setWidth = Ext.emptyFn;
this.el.setSize = Ext.emptyFn;
this.el.dom.scroll = 'no';
this.allowDomMove = false;
this.autoWidth = true;
this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;
}
});


I can see the height styling of x-viewport hurting it... I'll update the code in my enhancement request.

steffenk
10 Aug 2009, 5:17 AM
Hi Animal,

i updated my code with your last change. The example will stay, so you may use it for demonstration.

Thanks for your contribution! (also thanks to Condor)

Animal
10 Aug 2009, 5:25 AM
If this makes it into a version of Ext, we should get together some nice demo with some surrounding boilerplate HTML round the "island" of Ext, and put it into examples/layout.

People often want to keep some corporate site layout that's possibly generated, but use Ext in a part of it, so some demo which looks "corporate" with a static header and left nav bit with some images and things there, but with a Viewport in the content area would be good.

steffenk
10 Aug 2009, 5:34 AM
I agree, wasn't meant as public demo, only as demo for the feature request to show that it works.

btw - i don't find the island demo in the release you was talking about (ext-island.html), where can it be found?

Animal
10 Aug 2009, 5:37 AM
Just upthread: http://extjs.com/forum/showthread.php?p=371146#post371146

steffenk
10 Aug 2009, 5:40 AM
8-| missed the as :)