ExtJS Контент, скользящий / прокручиваемый как Sencha Touch (ExtJS Drag Scroll) - PullRequest
Новая
       17

ExtJS Контент, скользящий / прокручиваемый как Sencha Touch (ExtJS Drag Scroll)

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

Как добиться эффекта скольжения / прокрутки содержимого Ext.panel.Panel / Ext.view.View или любого другого контейнера, например, в мобильных приложениях или Sencha Touch?

Что-то вроде прокрутки с помощью мыши(как документы в формате PDF).

Может кто-нибудь дать мне подсказку, фрагмент кода или просто сказать, с чего начать?

С уважением

1 Ответ

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

RahulSingla интегрировал iScroll с extjs для достижения этой функциональности здесь . Это с extjs3 однако. На сегодняшний день мне нужно то же самое в extjs4 для панели сетки. Поэтому я попробую что-то в этом духе, но с методами прокрутки extjs вместо iScroll. Я обновлю, если у меня что-нибудь получится.

UPDATE:

Готово. (для того, что мне было нужно) Оказалось довольно простым добавить прокрутку перетаскиванием из прослушивателя на панели сетки, не нужно было много кода: 

listeners: {
    'itemmousedown': function(view, rec, item, idx, event) {

        var startX = event.getX();
        var startY = event.getY();

        var grid = view.up('gridpanel');
        var div = grid.getEl();
        var body = Ext.getBody();

        body.setStyle('cursor','-moz-grabbing'); //doesn't work in 4.0.7+

        div.on('mousemove', function(e) {
            x = e.getX(), y = e.getY()
            grid.scrollByDeltaX(startX - x);
            grid.scrollByDeltaY(startY - y);
            startX = x
            startY = y
        });

        body.on('mouseup', function(e){
            body.setStyle('cursor','default'); //doesn't work in 4.0.7+
            div.removeAllListeners();
            body.removeAllListeners();
        });

        body.on('mouseleave', function(e, tgt){
            body.setStyle('cursor','default'); //doesn't work in 4.0.7+
            div.removeAllListeners();
            body.removeAllListeners();
        });
    }
}

Я проверял это только на FF, потому что это все, что мы используем в нашей интрасети. Я не уверен, что в IE есть функции mousemove .getX() или .getY(), так что их, возможно, придется настроить.

Для других панелей (что-то кроме панели сетки) вы могли бы просто заменить слушатель itemmousedown просто слушателем mousedown, чтобы иметь те же функциональные возможности.

...