View Full Version : Ext.Element.scrollIntoPosition - scroll an Element within a container to anchor point

11 Dec 2009, 9:23 AM
Hello Ext Community!

I miss the possibility to decide in Ext.Element.scrollIntoView, if the element should be scrolled to top or to bottom of the passed container, like the standard scrollIntoView (http://www.java2s.com/Code/JavaScriptReference/Javascript-Methods/scrollIntoViewSyntaxParametersandNote.htm).
That's why I created a function, which allows you to scroll an element within a cointainer to a specific anchor point with the position syntax from alignTo (http://www.extjs.com/deploy/dev/docs/?class=Ext.Element&member=alignTo). That misuses the alignTo functionality to scroll the container to the specific point, but not to set the elements position directly.

Ext.override(Ext.Element, {
* Scrolls this element within the passed element relative to the specified anchor points.
* See {@link #alignTo} for more info on the supported position values.
* @param {Element} container The container element to scroll.
* @param {String} position The position to scroll to.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Element} this
scrollIntoPosition: function(container, position, animate) {
var eXY = this.getXY(),
aXY = this.getAlignToXY(container, position);
return container.scrollTo('top', eXY[1]-aXY[1]+container.dom.scrollTop, animate).scrollTo('left', eXY[0]-aXY[0]+container.dom.scrollLeft, animate);

How to use:

// Scrolls the TreeNode within the TreePanel to the left middle position of the TreePanel
Ext.fly(node.ui.getAnchor()).scrollIntoPosition.(tree.getTreeEl(), 'l-l');

What do you think about it?