ExtJS 4.0.7 scrollTo () прокручивает, но не перемещает ползунок полосы прокрутки? - PullRequest
Новая
       2

ExtJS 4.0.7 scrollTo () прокручивает, но не перемещает ползунок полосы прокрутки?

2 голосов
/ 26 января 2012

У меня есть панель дерева, и я пытаюсь сделать анимированный свиток в определенных местах.Я делаю что-то вроде этого: 

myTreePanel.getView().getEl().scrollTo('top', yCoord, true /*animate*/);

Вид прокручивается в правильное местоположение, , но «ползунок» на полосе прокрутки не перемещается .Есть идеи, почему?

Некоторая дополнительная информация: если я делаю следующее вместо этого, ползунок полосы прокрутки перемещается правильно (но, конечно, scroll () не поддерживает анимацию - я бы предпочел использовать .scrollTo ()чтобы пользователь мог видеть прокрутку): 

myTreePanel.getView().getEl().scroll('down', yDiff);

Спасибо за любую помощь / совет!

Ответы [ 2 ]

3 голосов
/ 27 января 2012

@ Предложение MoleculeMan об отключении пользовательских полос прокрутки (которые ExtJS использует в 4.0.x, но не в 4.1) работает . После этого вы можете вызвать myTreePanel.getView (). GetEl (). ScrollTo ('top', yCoord, true), и все работает как положено: прокрутка анимирована и полоса прокрутки перемещается. Единственная проблема заключается в том, что, по-видимому, нарушается возможность прокрутки вида, если вы используете клавиши со стрелками вверх / вниз для перемещения по дереву.

Это не очень элегантно, но обходной путь, который я собираюсь использовать, таков: 

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Wait 300ms then sync the scroll bar with the tree view
setTimeout(function() {
    myTreePanel.setScrollTop(yCoord);
}, 300);

Это имеет косметический недостаток, заключающийся в том, что полоса прокрутки «подпрыгивает» на месте, вместо плавного перемещения с анимацией, но дает преимущество не ломая прокрутку клавиш вверх / вниз. Кроме того, поскольку он не требует изменения параметров конфигурации или переопределения стиля представления дерева, я предполагаю, что он все равно будет работать после обновления до ExtJS 4.1 (т. Е. Вызов по таймеру для setScrollTop () будет ненужным, но не должен прерываться). ничего).

Обратите внимание, что вызов setScrollTop () перемещает полосу прокрутки, но также заставляет представление «перепрыгивать» в эту позицию. Поэтому вам нужно убедиться, что таймер не сработает, пока анимация не закончится. Я на самом деле использую некоторый пользовательский код для опроса каждые 10 мс и проверки, видима ли строка назначения, затем вызываю setScrollTop (), вместо того, чтобы использовать таймер, который всегда ждет какое-то жестко запрограммированное количество времени: 

var scrollToRowNum = 5;
var scrollToEl = getElementForNode(myTreePanel.getRootNode().childNodes[scrollToRowNum]);
var yCoord = scrollToEl.getOffsetsTo(scrollToEl.parent())[1];

// Animated scroll of tree view
myTreePanel.getView().getEl().scrollTo('top', yCoord, true);

// Check every 10ms to see if animation is done, then sync scrollbar
var timerId = setInterval(function() {
    if( myTreePanel.isTreeElementWithinVisibleArea(scrollToEl) ) {
        clearInterval(timerId);
        myTreePanel.setScrollTop(yCoord);
    }
}, 10);

Функция isTreeElementWithinVisibleArea () просто проверяет, находится ли текущая Y-координата элемента (абсолютная) между верхом и низом поля дерева.

2 голосов
/ 26 января 2012

Не удивительно. Они используют свою собственную полосу прокрутки . Правильный код будет: 

myTreePanel.verticalScroller.setScrollTop(yCoord);

Однако анимация также не поддерживается. Поэтому я рекомендую избавиться от пользовательской полосы прокрутки, как я описал здесь , и использовать ваш оригинальный код.

...