Scroll to top of panel [Archive]

aaronbartell

23 Dec 2010, 2:06 PM

Hi All,

I have tried a number of solutions from these forums but can't seem to get my situation to work.

I have an application where I show and hide panels within a tabbed panel, and sometimes the panels are vertically long enough to require the user to scroll down. Then when they select the button at the bottom of the panel to go to the next panel, it doesn't scroll to the top to display the sometimes shorter panel.

I created a quick/small video to show the problem. The browser window was made shorter for example purposes.

http://screencast.com/t/JFc55ud6 (created with Jing - http://www.techsmith.com/Jing)

Below is my code. Specifically look in function btnHandler for my varied attempts.

<html>
<head>
<link rel='stylesheet' type='text/css' href='http://extjs-public.googlecode.com/svn/tags/extjs-3.3.1/release/resources/css/ext-all.css' />
<script type='text/javascript' src='http://extjs-public.googlecode.com/svn/tags/extjs-3.3.1/release/adapter/ext/ext-base.js'></script>
<script type='text/javascript' src='http://extjs-public.googlecode.com/svn/tags/extjs-3.3.1/include/ext-all.js'></script>
<script type='text/javascript'>

Ext.onReady(function(){

function btnHandler(button, event){
if(button.getId() == 'btn1') {
p1.hide();
p2.show();

// All my attempts at scrolling to top - none of them work.
p2.body.scrollTo('top', 0);
p2.body.scrollIntoView();

tabsMain.body.scrollTo('top', 0);
tabsMain.body.scrollIntoView();

scroll(0,0);
}
}

var p1 = new Ext.FormPanel({
id:'p1',
title:'Panel1',
defaultType:'textfield',
items:[
{
xtype: 'fieldset',
html: 'Text<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>press the Next button.'
},{
fieldLabel:'Field1.1',
id:'fld1.1',
},{
fieldLabel:'Field1.2',
id:'fld1.2',
},{
fieldLabel:'Field1.3',
id:'fld1.3',
},{
fieldLabel:'Field1.4',
id:'fld1.4',
},{
fieldLabel:'Field1.5',
id:'fld1.5',
},{
fieldLabel:'Field1.6',
id:'fld1.6',
},{
fieldLabel:'Field1.7',
id:'fld1.7',
},{
fieldLabel:'Field1.8',
id:'fld1.8',
}
],
buttons:[{id:'btn1',text:'NEXT',handler:btnHandler}]
});

var p2 = new Ext.FormPanel({
id:'p2',
hidden:true,
title:'Panel2',
items:[{
xtype: 'fieldset',
html: 'Panel 2...<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> did it scroll to the top?'
}]
});

var tabsMain = new Ext.TabPanel({
activeTab: 0,
title: 'Tab Panel',
width:780,
height:1024,
items:[{
id:'tab1',
title:'Tab1',
items:[p1,p2]
}]
});

var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region:'north',
xtype:'toolbar',
height:30,
items:[
{
xtype: 'label',
html:'<b>North Toolbar</b>'
}]
},{
region:'west',
xtype:'panel',
split:true,
collapsible:true,
title:'Navigation',
width:100
},{
region:'center',
id:'vpCenter',
xtype:'panel',
autoScroll:true,
items:[tabsMain]
}]
});

});

</script>
</head>
<body>
</body>
</html>

Thanks in advance for responding,
AaronBartell.com
www.SoftwareSavesLives.com

Screamy

23 Dec 2010, 3:59 PM

I see a couple of problems:

Overnesting - tabsMain should not be nested in a panel; if should be the center region of the viewport. Just add region: 'center' to tabsMain and add it directly to the viewport's items collection.
Fixed Sized on TabPanel - remove the height/width from tabsMain. Since it's will now act as the center region of the viewport, it will automatically grow/shrink to fill the center region.

firefoxSafari

23 Dec 2010, 4:39 PM

The way you have it set up now, I think you'd have to scroll the body of the panel you have defined as the center region.

Ext.getCmp('vpCenter').body.scrollTo('top', 0);

As noted by Screamy, it would probably be cleaner if you eliminate some nesting.

aaronbartell

28 Dec 2010, 6:24 AM

firefoxSafari,

The following code accomplished exactly what I needed:

Ext.getCmp('vpCenter').body.scrollTo('top', 0)

It now scrolls to the top.

Thanks guys,
AaronBartell.com

[email protected]

10 Jan 2014, 1:41 AM

It is working fine for a FormPanel or BaseFormPanel, but not for Tab panel.
Any suggestions for tab panel scroll to top?