天天看點

Extjs grid panel 滾動條失效的解決方法

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

Extjs grid panel 滾動條失效的解決方法

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

至于為什麼gridpanel會失效?暫時也不清楚原因是什麼。之前在Extjs的論壇和stackoverflow上都有人遇見類似的問題,但是版本可能是都是4.1之前的,Extjs的dev team說他們從4.1版本開始已經修複了這個問題(不确定,希望用過4.1版本的童鞋論證下)。

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

1 2 3 4 5 6

xtype:

'gridpanel'

,

// autoScroll:true,

scroll:

false

,     

viewConfig: {

style: { overflow:

'auto'

, overflowX:

'hidden'

}

}

可以看到,禁用了autoScroll這個屬性,并且把scroll設定為false,然後設定viewConfig, 這裡把橫向的滾動條給禁用了,隻保留縱向的滾動條。OK 問題解決,看看效果:

Extjs grid panel 滾動條失效的解決方法

 

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

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

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

1

resizable:

false

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