之前用EXTJS的gridPanel組件的時(shí)候，因?yàn)榻?jīng)常對(duì)gridPanel中的stroe數(shù)據(jù)進(jìn)行過(guò)濾，所以有時(shí)候總是導(dǎo)致gridPanel自身所帶的scrollbar失效。

取個(gè)實(shí)例，EXTJS gridPanel自帶的滾動(dòng)條，是有一個(gè)固定的列寬來(lái)放置這個(gè)scrollbar的，如上圖所示。所以當(dāng)這個(gè)scrollbar失效的時(shí)候，無(wú)論你怎么拖動(dòng)這個(gè)滾動(dòng)條，grid中的數(shù)據(jù)永遠(yuǎn)都不會(huì)隨scrollbar的移動(dòng)而展示相應(yīng)區(qū)域的數(shù)據(jù)（換句話說(shuō)就是你永遠(yuǎn)看到的數(shù)據(jù)都是截圖中的這幾條record）。

至于為什么gridpanel會(huì)失效？暫時(shí)也不清楚原因是什么。之前在Extjs的論壇和stackoverflow上都有人遇見(jiàn)類似的問(wèn)題，但是版本可能是都是4.1之前的，Extjs的dev team說(shuō)他們從4.1版本開(kāi)始已經(jīng)修復(fù)了這個(gè)問(wèn)題（不確定，希望用過(guò)4.1版本的童鞋論證下）。

好了，現(xiàn)在來(lái)說(shuō)說(shuō)怎么解決scrollbar失效。

xtype: 'gridpanel',
// autoScroll:true,
scroll:false, 
viewConfig: {
style: { overflow: 'auto', overflowX: 'hidden' }
}

可以看到，禁用了autoScroll這個(gè)屬性，并且把scroll設(shè)置為false，然后設(shè)置viewConfig, 這里把橫向的滾動(dòng)條給禁用了，只保留縱向的滾動(dòng)條。OK 問(wèn)題解決，看看效果：

這時(shí)會(huì)發(fā)現(xiàn)滾動(dòng)條沒(méi)有了自己的固有列，而是和grid的最后一個(gè)列并在了一起，gridPanel自帶的scrollbar就這樣被禁用咯。

同時(shí)也解決了這個(gè)潛在的bug。

但是這種用法最好是將grid中的所有列都設(shè)置好固定的寬度，并且設(shè)置屬性：

resizable:false

這樣可以避免一些禁用橫向滾動(dòng)條帶來(lái)的不必要麻煩。

最新評(píng)論