CODEWITHSUNDEEP
extjssencha-touch
tcurdt
tcurdt

Reputation: 15788

Programmatically scroll Sencha Touch Ext.Panel to anchor element

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');

Upvotes: 2

Views: 9203

Answers (3)

tcurdt
tcurdt

Reputation: 15788

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.

Upvotes: 6

Edward B
Edward B

Reputation: 136

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.

Upvotes: 2

egerardus
egerardus

Reputation: 11486

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.

Upvotes: 0

Related Questions