1

ExtJを使用していて、デフォルトのスクロールバー（グリッドパネル用）の外観を変更しようとしています。

jScrollPaneを使用してみましたが、ExtJではまったく機能しません。

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を再適用（および古いものを削除）する必要があります。内部的には、が孤立することを意味する何かが発生するjScrollPaneため、孤立したものを削除します。

ストアレコードが追加および削除されると、私も呼び出しreapplyScrollbarます。

当然、これは機能しますが、非常に厄介です。最終的には、レンダリングされたマークアップを変更することで、より深い場所でそれを実行します。

于 2012-01-17T13:02:18.927 に答える
0

私はなんとかextJsGridPanelでjscrollpaneを使用しています。

グリッドパネルのレンダーリスナーに入れました

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