更改 ExtJ 中的滚动条

Question

我正在使用 ExtJs 并尝试更改默认滚动条的外观（对于网格面板）。

我尝试使用 jScrollPane，但它根本无法与 ExtJs 一起使用。

有没有办法改变 ExtJS 中滚动条的默认外观。我不会实现类似于 jScrollPane 的外观，

谢谢！

Answer 1

我在寻找在 extjs 4.0.7 网格上实现 jScrollPane 时偶然发现了这篇文章，

我找不到任何其他合适的东西，现在我有这种可怕的 hacky 方法：

将其应用于您的网格配置

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。

当然，虽然这有效，但非常令人讨厌。最终我将通过更改渲染的标记来更深入地做到这一点。

Answer 2

我设法将 jscrollpane 与 extJs GridPanel 一起使用。

在网格面板的渲染侦听器中我放置

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