Changing scroll-bars in ExtJs

Question

I'm using ExtJs and trying to change look of the default scroll-bars (for Grid Panel).

I tried using jScrollPane, but it's not working at all with ExtJs.

Is there any way to change look of default look of scroll-bars in ExtJS. I wont to achieve look similar to jScrollPane

Thanks!

Answer 1

I manage to use jscrollpane with extJs GridPanel.

In render listener of Grid Panel I put

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

Answer 2

I stumbled across this post while looking to implement jScrollPane on the extjs 4.0.7 grid

I couldn't find anything else suitable, and I now have this terrible hacky way of doing it:

Apply this to your grid config

scroll: false

And this to your grid's viewModel

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

so that the internal scrolling is switched off.

Apply this function to your grid that extends 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 = "";
    }
}

The general idea is that layout is called way too many times to know what's going on internally, so we'll check the condition of the grid view. If the grid view has a different height to its container then the jScrollPane needs re-applying (and the old one removing). Internally something happens that means the jScrollPanes get orphaned, so we remove orphaned ones.

When store records are added and removed I'm also calling reapplyScrollbar.

Naturally although this works it is very nasty. Eventually I'll do it somewhere deeper by changing the rendered markup.