Extjs grid panel自帶滾動條失效的解決方案

admin發表於2017-03-28
JS

之前用EXTJS的gridPanel元件的時候，因為經常對gridPanel中的stroe資料進行過濾，所以有時候總是導致gridPanel自身所帶的scrollbar失效。

a:3:{s:3:\"pic\";s:43:\"portal/201703/28/165255h28z2n486d86y42o.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

取個例項，EXTJS gridPanel自帶的滾動條，是有一個固定的列寬來放置這個scrollbar的，如上圖所示。所以當這個scrollbar失效的時候，無論你怎麼拖動這個滾動條，grid中的資料永遠都不會隨scrollbar的移動而展示相應區域的資料（換句話說就是你永遠看到的資料都是截圖中的這幾條record）。

至於為什麼gridpanel會失效？暫時也不清楚原因是什麼。之前在Extjs的論壇和stackoverflow上都有人遇見類似的問題，但是版本可能是都是4.1之前的，Extjs的dev team說他們從4.1版本開始已經修復了這個問題，但是不確定，大家可以自己確認一下。

現在來說說怎麼解決scrollbar失效。

[JavaScript] 純文字檢視 複製程式碼
xtype:'gridpanel',
// autoScroll:true,
scroll:false, 
viewConfig:{
  style: { overflow: 'auto', overflowX: 'hidden' }
}

禁用了autoScroll這個屬性，並且把scroll設定為false，然後設定viewConfig, 這裡把橫向的滾動條給禁用了，只保留縱向的滾動條。

問題解決，看看效果:

a:3:{s:3:\"pic\";s:43:\"portal/201703/28/165342ndltfkkqkk1twk5b.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

這時會發現滾動條沒有了自己的固有列，而是和grid的最後一個列並在了一起，gridPanel自帶的scrollbar就這樣被禁用。

同時也解決了這個潛在的bug。

但是這種用法最好是將grid中的所有列都設定好固定的寬度，並且設定屬性:

[JavaScript] 純文字檢視 複製程式碼
resizable:false

這樣可以避免一些禁用橫向滾動條帶來的不必要麻煩。

相關文章