PDA

View Full Version : Scrolling Inside Of A Vbox Layout



jpeters3047
3 Nov 2010, 1:03 PM
Hello,

I have a vbox with 3 panels, the first 2 of which have fixed height, and the 3rd of which expands and collapses as the user resizes the browser. However, I'd like if the 3rd panel would stop collapsing at some (defined) point and activate its scroll bars. I thought that setting the boxMinHeight and autoScroll properties would achieve this but it did not. Am I mis-using the layout? How would I achieve this effect?



Ext.onReady(function() {

var top = new Ext.Panel({
border: true,
height: 100,
html: 'top'
});

var mid = new Ext.Panel({
border: true,
height: 100,
html: 'mid'
});

var bot = new Ext.Panel({
border: true,
autoScroll: true,
boxMinHeight: 200,
flex: 1,
layout: 'border',
items: [ { region: 'center', html: 'bot' } ]
});

var panel = new Ext.Panel({
region: 'center',
layout: 'vbox',
items: [ top, mid, bot ],
layoutConfig: {
align: 'stretch',
pack: 'start'
}
});

var vp = new Ext.Viewport({
layout: 'border',
items: [ panel ]
});

});


Thanks!

-Jon

Animal
3 Nov 2010, 10:55 PM
I think it is working.

Try putting some overflowing HTML in "bot" as you have it there will ever be any overflow.

Also, why did you create the wrapping Panel and put it into a border layout? Want a vbox Viewport? Use a vbox Viewport:



Ext.onReady(function() {

var top = new Ext.Panel({
border: true,
height: 100,
html: 'top'
});

var mid = new Ext.Panel({
border: true,
height: 100,
html: 'mid'
});

var bot = new Ext.Panel({
border: true,
autoScroll: true,
boxMinHeight: 200,
flex: 1,
html: 'lorem<br>ipsum<br> etc etc etc etc etc with lots of <BR>s...
});

var vp = new Ext.Viewport({
layout: 'vbox',
items: [ top, mid, bot ],
layoutConfig: {
align: 'stretch',
pack: 'start'
}
});
});