Question

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

我尝试使用jScrollPane，但它与ExtJs完全不兼容。

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

的外观

谢谢！

Answer 1

我在寻找在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需要重新应用（并且旧的删除）。内部发生的事情意味着jScrollPane被孤立，所以我们删除了孤儿。

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

当然，虽然这是有效的，但它非常讨厌。最终我会通过更改渲染的标记在更深的地方做到这一点。

Answer 2

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

在Grid Panel的渲染侦听器中，我放了

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

在ExtJs中更改滚动条

2 个答案: