更改ExtJs中的滾動條

Question

我正在使用ExtJs並試圖更改默認滾動條（對於Grid Panel）的外觀。

我試過使用jScrollPane，但它不能用ExtJs工作。

有什麼辦法可以改變ExtJS中滾動條默認外觀的樣子。我不會實現類似於jScrollPane的外觀

謝謝！

Answer 1

我設法使用jscrollpane和extJs GridPanel。

在渲染網格面板的聽衆，我把

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

Answer 2

我碰到這個崗位絆倒，同時希望在ExtJS的實現JScrollPane的4.0.7電網

我找不到別的合適的，我現在做的這個可怕的哈克的方式：

應用此網格配置

scroll: false

這對您的網格視圖模型

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。

當然，雖然這個工程是非常討厭的。最終我會通過更改呈現的標記來深入其中。