javascript - 在 ExtJs 中更改滚动条

Question

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

我尝试使用 jScrollPane，但它对 ExtJs 根本不起作用。

有什么方法可以更改 ExtJS 中滚动条的默认外观。我不会实现类似于 jScrollPane 的外观

谢谢!

Answer 1

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

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

将此应用于您的网格配置

滚动:错误

这是你网格的 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 = "";
    }
}

一般的想法是布局被调用了太多次而不知道内部发生了什么，所以我们将检查 GridView 的情况。如果 GridView 与其容器的高度不同，则 jScrollPane 需要重新应用(并删除旧的)。在内部发生了一些事情，这意味着 jScrollPane 变得孤立了，所以我们删除了孤立的。

添加和删除商店记录时，我还会调用 reapplyScrollbar。

自然地，虽然这有效但非常讨厌。最终，我将通过更改呈现的标记来更深入地完成它。