1

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

我尝试使用 jScrollPane，但它根本不适用于 ExtJs。

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

谢谢！

4

2 回答 2

3

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

我找不到其他合适的东西，现在我有这种可怕的骇人听闻的方法：

将此应用于您的网格配置

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 需要重新应用（并删除旧的）。在内部发生了一些事情，这意味着jScrollPanes 成为孤立的，所以我们删除了孤立的。

当添加和删除商店记录时，我也在调用reapplyScrollbar.

当然，尽管这可行，但它非常讨厌。最终我会通过改变渲染的标记来做更深层次的事情。

于 2012-01-17T13:02:18.927 回答
0

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

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

$(function(){
    $('.x-grid3-scroller').jScrollPane();
});
于 2011-11-25T11:16:55.807 回答