PDA

View Full Version : Problems with autoscrolling



smick
2 Nov 2010, 1:04 PM
Hello,

I've been battling an issue with getting auto scrolling to work in nested layouts for weeks now. I would really appreciate any help with this issue. It's driving me bonkers and I've almost considered just writing a pagination method as an alternative. I'm sure it's something simple, maybe I'm using the layouts wrong or something. Anyhow, my simple test code:


Ext.onReady(function() {

var top_stuff = new Ext.Panel({

id: "top_content",
html: "top stuff",
});

var center_stuff = new Ext.Panel({

id: "panelContent",
html: "Scroll<br><br>Scroll<br><br>Scroll<br><br>Scroll<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>Scroll<br><br>Scroll<br><br>Scroll<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>",
border: false
});

var center_panel = new Ext.Panel({

id: 'container_panel',
items: [{
region: "north",
autoScroll: false,
items: [top_stuff]
},{
region: 'center',
//I need this to scroll!!!
autoScroll: true,
items: [center_stuff]
}],
border: false
});

oViewport = new Ext.Viewport({

defaultType: "container",
layout: "border",
items: [{
region: "north",
autoScroll: false,
html: 'hello'
},{
region: "center",
autoScroll: false,
items: [center_panel]
}]
});

});

smick
2 Nov 2010, 4:25 PM
Aha! I wasn't setting heights. I needed to set specific heights for non stretchy regions, and autoHeight: true, on the stretchy regions, and now it's working.

Condor
3 Nov 2010, 1:30 AM
You are overnesting!

Use:

Ext.onReady(function() {

var top_stuff = new Ext.Panel({
region: "north",
id: "top_content",
html: "top stuff",
autoHeight: true
});

var center_stuff = new Ext.Panel({
region: 'center',
autoScroll: true,
id: "panelContent",
html: "Scroll<br><br>Scroll<br><br>Scroll<br><br>Scroll<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>Scroll<br><br>Scroll<br><br>Scroll<br><br>content<br><br>content<br><br>content<br><br>content<br><br>content<br><br>",
border: false
});

var center_panel = new Ext.Panel({
region: "center",
id: 'container_panel',
items: [top_stuff, center_stuff],
border: false
});

oViewport = new Ext.Viewport({
defaultType: "container",
layout: "border",
items: [{
region: "north",
html: 'hello',
autoHeight: true
},
center_panel]
});

});

smick
3 Nov 2010, 12:12 PM
Aha, thanks for the example!