Изменение полос прокрутки в ExtJs - PullRequest
Новая
       48

Изменение полос прокрутки в ExtJs

1 голос
/ 25 ноября 2011

Я использую ExtJ и пытаюсь изменить вид полос прокрутки по умолчанию (для Grid Panel).

Я пытался использовать jScrollPane, но он совсем не работает с ExtJ.

Есть ли способ изменить внешний вид полос прокрутки по умолчанию в ExtJS. Я хочу добиться, чтобы выглядеть похожим на jScrollPane

Спасибо!

Ответы [ 2 ]

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

Я наткнулся на этот пост, пытаясь реализовать jScrollPane в сетке extjs 4.0.7

Я не смог найти ничего подходящего, и теперь у меня есть такой ужасный хакерский способ сделать это:

Примените это к вашей конфигурации сетки

scroll: false

А это для модели вашей сетки view 

style: {
    overflow: 'auto',
    'overflow-x': 'hidden'
}

, чтобы отключить внутреннюю прокрутку.

Примените эту функцию к вашей сетке, которая расширяет Ext.grid.Panel 

reapplyScrollbar: function () {
    var items = $('#' + this.id + ' .x-grid-view');
    var broken = $('#' + this.id + ' .jScrollPaneContainer:not(:first-child)');
    var unbroken = $('#' + this.id + ' .jScrollPaneContainer:first-child');
    console.log('unbroken count=' + unbroken.length);
    console.log('removing ' + broken.length + ' broken containers');
    broken.remove();

    // grid resized so scroller must be removed
    if (items.parent().is('.jScrollPaneContainer') && items[0].parentNode.clientHeight != items[0].clientHeight) {
        console.log('moving el up to grid body');
        var container = items.parent();
        var gridBody = items.parent().parent();
        gridBody.append(items);
        container.remove();

        if (items[0].parentNode.clientHeight != items[0].clientHeight || items[0].parentNode.clientWidth != items[0].clientWidth) {
            items[0].style.height = items[0].parentNode.clientHeight + 'px';
            items[0].style.width = items[0].parentNode.clientWidth + 'px';
            console.log('moved el and reset height & width');
        }

    } else if (items.length > 0 && items[0].clientHeight > 0 && unbroken.length == 0) {
        if (items[0].parentNode.clientHeight != items[0].clientHeight) {
            items[0].style.height = items[0].parentNode.clientHeight + 'px';
            items[0].style.width = items[0].parentNode.clientWidth + 'px';
            console.log('reset height & width');
        }

        console.log('applying scroll');
        items.jScrollPane();
        items[0].style.top = "";
    }
}

Общая идея заключается в том, что макет вызывается слишком много раз, чтобы знать, что происходит внутри, поэтому мы проверим состояние вида сетки. Если представление сетки имеет другую высоту по отношению к своему контейнеру, тогда jScrollPane необходимо повторно применить (и удалить старый). Внутри происходит что-то, что означает, что jScrollPane становятся осиротевшими, поэтому мы удаляем осиротевших.

Когда записи магазина добавляются и удаляются, я также звоню reapplyScrollbar.

Естественно, хотя это работает, это очень противно. В конце концов я сделаю это где-нибудь глубже, изменив визуализованную разметку.

0 голосов
/ 25 ноября 2011

Мне удается использовать jscrollpane с extJs GridPanel.

В обработчик рендера Grid Panel я положил 

$(function(){
    $('.x-grid3-scroller').jScrollPane();
});
...