PDA

View Full Version : Trouble converting v1 nested border layout to v2



RLivsey
22 Nov 2007, 1:18 PM
Hi, I'm in the process of converting our site over to v2 and having a few issues.

The layout is (cue ascii art!):



|--------------------|
| header |
|--------------------|
| a | |
|-----| |
| b | contents |
|-----| |
| c | |
|--------------------|
Firstly, here's the basic HTML layout:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Layout Test</title>
</head>
<body>

<div id='header'>
header goes here
</div>

<div id='sidebar'>

<div id='sidebar_north'>
sidebar north
</div>

<div id='sidebar_center'>
sidebar center
</div>

<div id='sidebar_south'>
sidebar south
</div>

</div>

<div id='contents'>
contents go here
</div>

</body>
</html>
This is the v1 code we're using:



Ext.onReady(function(){

var layout = new Ext.BorderLayout(document.body, {
north: {
split:false
},
west: {
split: false,
initialSize: 200
},
center: {

}
});


var sidebar_layout = new Ext.BorderLayout($('sidebar'), {
north: {
split:false
},
center: {

},
south: {
split: false
}
});

sidebar_layout.beginUpdate();
sidebar_layout.add('north', new Ext.ContentPanel('sidebar_north', {}));
sidebar_layout.add('center', new Ext.ContentPanel('sidebar_center', {fitToFrame:true, autoScroll: true}));
sidebar_layout.add('south', new Ext.ContentPanel('sidebar_south', {}));
sidebar_layout.endUpdate(true);

var sidebar = new Ext.NestedLayoutPanel(sidebar);

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {}));
layout.add('west', sidebar);
layout.add('center', new Ext.ContentPanel('contents', {autoScroll: true, fitToFrame:true}));
layout.endUpdate();

});
And this is what I've got so far with v2:



Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout: 'border',

items: [
{
region: 'north',
contentEl: 'header'
},
{
region: 'west',
width: 200,
layout: 'border',

items: [
{
region: 'north',
contentEl: 'sidebar_north'
},
{
region: 'center',
contentEl: 'sidebar_center',
autoScroll: true
},
{
region: 'south',
contentEl: 'sidebar_south'
}
]
},
{
region: 'center',
contentEl: 'contents'
}
]
});
});
Problem #1 is how to get sidebar_center to fill its parent. In v1 we had 'fitToFrame:true' to accomplish this, how do we do it in v2? Do we have to have another layout and make it a FitLayout? I've tried this but while the fit container itself expands to the contents, the div 'sidebar_center' doesn't.

Problem #2 is that the western border layout creates its own div, how do we tell it to use the 'sidebar' div as the container for that layout? We have CSS applied to the sidebar div to style up all its contents.

Initially I looked at renderTo, or applyTo, but then they don't render it inside of the viewport as it leaves the sidebar div in place. So the CSS applies as expected, but it's not in the right place in the layout.

I've got a hacky way to accomplish this by doing the following:



var x = $('sidebar');
x.id = 'sidebar_temp';

// code as above but for the west region of sidebar, set id: 'sidebar'
...
{
region: 'west',
width: 200,
layout: 'border',
id: 'sidebar',
items: [....]
}
...

// remove the original sidebar node
x.remove();
But obviously this is a bit horrible and I'd rather a supported way!

Thanks in advance.

RLivsey
23 Nov 2007, 3:53 AM
Added some more information, so bumping the post.

random0xff
23 Nov 2007, 4:18 AM
I would like to see some advice on this issue too. I am in exactly the same situation, I already have some HTML divs, and I feel that best way to create the Ext components is by using the applyTo config option. However, that implies a rendering into the parent element, but I still want to add them to a region in a BorderLayout.

Thanks!

Animal
23 Nov 2007, 5:24 AM
try



{
region: 'west',
el: 'sidebar',
width: 200,
layout: 'border',

RLivsey
23 Nov 2007, 5:47 AM
Fantastic, works a treat.

Thanks!

random0xff
27 Nov 2007, 12:54 AM
I can't seem to find the el config option in the documentation for 2.0, where should I look?

tryanDLS
27 Nov 2007, 10:43 AM
I can't seem to find the el config option in the documentation for 2.0, where should I look?

It's contentEl in 2.0.