ExtJsのスクロールバーを変更する

私はExtJsを使用しており、デフォルトのスクロールバー(グリッドパネル用)の外観を変更しようとしています。

私はjScrollPaneを使ってみましたが、ExtJsでは全く動作しません。

ExtJSのスクロールバーのデフォルトの外観の外観を変更する方法はありますか?私はjScrollPaneに似た外観を実現するつもりはない

ありがとう!

1
www.sencha.com/forum/showthread.php?56199-Scrollbar-to-the-E‌ xtJS-panelをご覧ください
追加された 著者 Davor Zubak,

2 答え

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 も呼び出されます。

当然これは動作しますが、それは非常に厄介です。最終的には、レンダリングされたマークアップを変更することで、どこかで深くやっていきます。

3
追加された
再適用関数と呼ばれる場所についてより具体的に説明できますか?私はどこを呼んでいるのですか?何回ですか?
追加された 著者 Saeed Neamati,

extJs GridPanelでjscrollpaneを使うことができます。

グリッドパネルのレンダーリスナーでは、

$(function(){
    $('.x-grid3-scroller').jScrollPane();
});
0
追加された
render リスナーの内部にコードを投稿できますか?ありがとう。
追加された 著者 Saeed Neamati,
申し訳ありませんが、私はもうコードを持っていません:-(
追加された 著者 mikipero,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript