Ext JS 列表裡的QuickTipManager翻頁後不能正常顯示的問題解決方案
阿新 • • 發佈:2018-11-30
需求:
在列表裡渲染一個圖示,滑鼠懸浮上後,顯示一個彈出框,裡面根據資料不同而顯示對應的項。如下圖:
問題現象:
當對列表進行翻頁後,不能正常顯示小框,且瀏覽器控制檯反覆列印紅色錯誤。
程式碼:
原因:displaySegmentBinding:function (image) { // debugger; Ext.tip.QuickTipManager.register({ target: image.el, title: '繫結碼段', text: image.lData, cls:'tips-message', width: 100, height:300, // autoHide:false, dismissDelay: 10000 // Hide after 10 seconds hover }); }
QuickTipManager為元件註冊彈出訊息後,如果不先取消註冊,即unregister而銷燬,就會發生錯誤,導致新註冊的元件不能正常顯示tips。
解決方案:
先解除註冊,再移除(remove)或銷燬(destroy)元件。let binding_segments = record.get('segments'),displayImage=this.down('[name=bind-display]'); //先解除註冊 if(displayImage){ Ext.tip.QuickTipManager.unregister(displayImage.el); } this.removeAll();