PDA

View Full Version : Getting Ext.Viewport to work



Wukfit
27 Nov 2007, 4:17 AM
Hi there,

This is probably a newbie question so appologies...

I'm trying to get a 2 col layout using the Viewport and BorderLayout:



Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items:[
{
region: 'west',
el: 'navigation',
title: 'Explorer',
split:true,
width: 200,
minSize: 50,
maxSize: 400,
collapsible: false
},
{
region: 'center',
el: 'main-content',
title: 'Viewer',
minSize: 100,
collapsible: false,
margins:'0 0 0 0'
}
]
});
});


html:



<div id="navigation">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div id="main-content">
<p>Some content</p>
</div>


The problem is the ul and p elements are appearing outside ot the Ext generated stuff - pushing the 'layout' down...

Can anyone see what I'm missing?

Cheers,
wf

efege
27 Nov 2007, 4:52 AM
It's contentEl, and not el. :)

Wukfit
27 Nov 2007, 4:58 AM
thanks efege!

I had just realised that and was about to post that I'd solved it!

Cheers,
wf

poduru
29 Jan 2008, 9:41 PM
Hi there,

This is probably a newbie question so appologies...

I'm trying to get a 2 col layout using the Viewport and BorderLayout:



Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items:[
{
region: 'west',
el: 'navigation',
title: 'Explorer',
split:true,
width: 200,
minSize: 50,
maxSize: 400,
collapsible: false
},
{
region: 'center',
el: 'main-content',
title: 'Viewer',
minSize: 100,
collapsible: false,
margins:'0 0 0 0'
}
]
});
});


html:



<div id="navigation">
<ul>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
<li>Nav</li>
</ul>
</div>
<div id="main-content">
<p>Some content</p>
</div>


The problem is the ul and p elements are appearing outside ot the Ext generated stuff - pushing the 'layout' down...

Can anyone see what I'm missing?

Cheers,
wf

Solution for this is:

Use contentEl instead of el in the above code. This may works for your problem.