Programmatically scroll Sencha Touch Ext.Panel to anchor element

2
votes

I have a scrollable panel that shows content larger than the screen

new Ext.Panel({
  scroll: 'vertical',
  html: 'very larger content here with an anchor. <p id="anchor">'
});

and (on a click event) I want to (programmatically) scroll the panel to a certain HTML element . Preferably even animated. In jquery I would do something along the lines of

$('html,body').animate({ scrollTop: $("#anchor").offset().top }, 'slow');
3
extjssencha-touch

3 Answers

6
votes

Turns out what you can do is

function scrollIntoView(el,cmp) {
  var dy = cmp.scroller.offset.y + el.getY() - cmp.body.getY();
  cmp.scroller.setOffset({x:0, y:-dy}, true);
}

scrollIntoView(Ext.fly('anchor'), Ext.getCmp('panel'));

which probably is quite similar to what scrollIntoView() does internally - haven't looked at that code though. But it's without animation.

2
votes

You can do this by using the setOffset() function of the scroller object.

Example: You have your original panel:

var myPanel = new Ext.Panel({
  scroll: 'vertical',
  html: 'very larger content here with an anchor. <p id="anchor">'
});

To scroll this element, you just call

myPanel.scroller.setOffset(0,20)

You can add a third animation parameter as documented here, but I haven't tested that one yet.

0
votes

This has been problematic for Sencha Touch as far as I can tell, note that there is no .scrollIntoView() method in Touch like in the other Sencha frameworks. It can be done by integrating iScroll with Touch though, that will give you iScroll methods to accomplish it and make your scrolling more native. Here is an example of how it was done.