PDA

View Full Version : how to scroll top Ext.Container



yefo
22 Jun 2010, 2:08 AM
I have a container defined like this :



this.extComponent = new Ext.Container({
id: 'containerId',
contentEl: 'htmlContent',
autoScroll: true,
flex:1
});
I would like to reset to the top the scroll every time I add a new content to the container.
Something similar to scrollToTop in the Ext.grid.GridView.

Animal
22 Jun 2010, 2:23 AM
This is basic Dom manipulation which you should know about.

https://developer.mozilla.org/en/DOM/element.scrollTop

yefo
22 Jun 2010, 6:52 AM
Thanks for your answer.

this is the code I am using


Ext.get('containerId').scrollTo("top", -Ext.get('containerId').getHeight());

Animal
22 Jun 2010, 7:03 AM
What does Ext.get return?

yefo
22 Jun 2010, 7:07 AM
It returns an Ext.Element

Animal
22 Jun 2010, 7:15 AM
Right, and what does https://developer.mozilla.org/en/DOM/element.scrollTop document?

And how does Ext.element relate?

Mark
22 Jun 2010, 12:39 PM
I added two more methods to the Ext.Element and it works for me quiet good.



Ext.Element.addMethods(
{
scrollToTop: function(s, e, d) {
var off = (d !== undefined)? d: 20;

var dist = this.dom.scrollTop;
var opt = {
duration: s || 2,
easing: e || 'easeOutStrong',
scope: this
};
this.scroll('t', dist, opt);
return this;

},
scrollToBottom: function(s, e, d) {
var off = (d !== undefined)? d: 20;

var dist = this.dom.scrollHeight - off;
var opt = {
duration: s || 2,
easing: e || 'easeOutStrong',
scope: this
};
this.scroll('b', dist, opt);
return this;

}

}
);



var el = Ext.get('container');
var buttonDown = Ext.get('scrollDown');
buttonDown.on('click', function()
{

el.scrollToBottom(3);
}
);
var buttonTop = Ext.get('scrollTop');
buttonTop.on('click', function()
{
el.scrollToTop(3);
}
);

yefo
23 Jun 2010, 1:51 AM
Right, and what does https://developer.mozilla.org/en/DOM/element.scrollTop document?

And how does Ext.element relate?

Ext.Element encapsulates a DOM element and then using scrollTo (Either "left" for scrollLeft values or "top" for scrollTop values), I can scroll the container to the top.

The code I posted before is working fine. Animal, are you suggesting something smarter :-? ?

Animal
23 Jun 2010, 2:52 AM
OK you can use scrollTo. I was suggesting using the underlying DOM element which the Ext.Element was encapsulating in order to avoid a method call.

yefo
23 Jun 2010, 3:09 AM
OK you can use scrollTo. I was suggesting using the underlying DOM element which the Ext.Element was encapsulating in order to avoid a method call.

Ok, I see. Thanks for the suggestion ;)

mpavlis
11 Jun 2013, 12:33 PM
Would love an updated version of this.