scrollbar issues in nested layouts

[smick]

I've been struggling with this issue of scrollbars for a few days now. Maybe someone would be kind enough to point me in the right direction...

Here is a simple example I put together, which is a north/center viewport, with a panel loaded into the center region and 2 panels loaded into it. I want one of the deepest nested panels to scroll, and the other to just hide the overflow. The code should speak for itself. Am I doing something wrong?



var nested_north = {

//I don't want this to scroll
autoScroll: false,
xtype: 'panel',
region: 'north',
html: '<br><br><br>world<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello'
}

var nested_center = {

//I need this to scroll!!!
xtype: 'panel',
region: 'center',
autoScroll: true,
html: '<br><br><br>world<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>hello'
}

var something = {

xtype: 'panel',
items: [ nested_north, nested_center ]
}


var application = new Ext.Viewport({

layout: 'border',
items: [
{
region: "north",
html: 'hello'
},{
region: "center",
items: [ something ]

}
]
});



Thanks for any help. I've been spending all my development time trying to figure out the intricacies of layouts.

[mikeyroy]

Check out this quick screencast they just put out, it covers a lot and is really informative and will probably get you in the right direction: http://vimeo.com/15879797