【BUG】ExtJS3.4.0的Grid中垂直滾動條導致列錯位的解決方法

2024-04-27 15:13:17

字體：大中小

來源：轉載

供稿：網友

當ExtJS3.4.0版本（其之前的版本應該也存在此問題）的Grid組件中同時存在水平和垂直滾動條時，在Chrome瀏覽器下（基于webkit渲染引擎下的瀏覽，safari也存在，本人未測）垂直滾動條會導致內容列錯位。這是一個瀏覽器兼容性的ExtJS原生BUG（EXTJSIII-47），在ExtJS3.4.2版本中解決了。具體效果如下圖：

ext-3.4.0-grid

通過上圖，可以明顯的看到Grid組件的內容列發生“錯位”的現象。遇到問題的時候，本人試圖通過調試源碼和修改樣式來解決這個問題，無奈能力有限，只能去官方社區尋找答案。在更換了N個搜素關鍵字后，終于找到下面兩個類似于上述BUG的帖子：1.Webkit瀏覽器引發的ExtJS BUG (ExtJS BUGIIS-47 )2.ExtJS 3.2: Grid column header grouping第一個帖子的解決方法測試是可用的，它主要是修改獲取列寬度之和的方法（getTotalWidth）來修復這個問題，由于Webkit渲染引擎的變更（webkit352.3, chrome19以后 box-sizing默認為W3C的標準Box Model）導致每個列寬度計算的時候，列的寬度沒有把列的邊框寬度計算在內（ExtJS3.x中列邊框左右分別為1px，合計2px），因此再重載getTotalWidth方法時，為每個列加上2px的邊框寬度，此問題即可解決。第二帖子中的回復內容中，采用CSS樣式來解決此問題，我更傾向于采用這種方法解決。

@media screen and (-webkit-min-device-pixel-ratio:0) { .x-grid3-cell, /* Normal grid cell */ .x-grid3-gcell /* Grouped grid cell (esp. in head)*/ { box-sizing: border-box; }}

對于我這種CSS菜鳥來說，這幾行勉強看懂，但是對于“-webkit-min-device-pixel-ratio:0”這個media type，倒是沒用過；還有box-sizing的理解也比較模糊，找了幾篇文章，其中幾篇非常值得研讀：1.media type與media query2.各瀏覽器的Hack寫法(其中包含@media screen and (-webkit-min-device-pixel-ratio:0)這種寫法的說明)3.CSS3 Box-sizing添加上述CSS后，此問題解決： ext-3.4.0-grid-normal