1. 程式人生 > >Ext JS 列表裡的QuickTipManager翻頁後不能正常顯示的問題解決方案

Ext JS 列表裡的QuickTipManager翻頁後不能正常顯示的問題解決方案

需求:

在列表裡渲染一個圖示,滑鼠懸浮上後,顯示一個彈出框,裡面根據資料不同而顯示對應的項。如下圖:


問題現象:

當對列表進行翻頁後,不能正常顯示小框,且瀏覽器控制檯反覆列印紅色錯誤。

程式碼:

  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。

解決方案:

    let binding_segments = record.get('segments'),displayImage=this.down('[name=bind-display]');
    //先解除註冊
    if(displayImage){
      Ext.tip.QuickTipManager.unregister(displayImage.el);
    }
    this.removeAll();
先解除註冊,再移除(remove)或銷燬(destroy)元件。