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

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

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

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

scroll: false

И это для вашей сетки viewModel

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.

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

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

В прослушивателе рендеринга Grid Panel я поставил

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