Программная прокрутка Sencha Touch Ext.Panel для привязки элемента

Question

У меня есть прокручиваемая панель, которая показывает контент больше экрана

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

и (при событии щелчка) я хочу (программно) прокрутить панель до определенного элемента HTML.Желательно даже анимационные.В jquery я бы сделал что-то вроде

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

Answer 1

Оказывается, что вы можете сделать это

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

, что, вероятно, очень похоже на то, что scrollIntoView() делает внутри - хотя и не смотрел на этот код. Но это без анимации.

Answer 2

Вы можете сделать это, используя функцию setOffset() объекта scroller.

Пример: у вас есть исходная панель:

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

Для прокрутки этого элемента выпросто позвоните

myPanel.scroller.setOffset(0,20)

Вы можете добавить третий параметр анимации, как описано здесь , но я еще не проверял его.

Answer 3

Это было проблематично для Sencha Touch, насколько я могу судить, обратите внимание, что в Touch нет метода .scrollIntoView(), как в других платформах Sencha. Это можно сделать, интегрировав iScroll с Touch, что даст вам методы iScroll для его выполнения и сделает вашу прокрутку более естественной. Здесь - пример того, как это было сделано.