extjs - グリッドの更新/更新時に ExtJS グリッドの画像の「ちらつき」を防ぐ

Question

HTML タグを返す列レンダラーを使用して、ExtJS グリッドに画像を表示しています。問題は、グリッドが更新されるたびに画像が「ちらつく」(つまり、消えて再表示される) ことです。これを防ぐ方法はありますか？これが私がやっていることの簡単な例です:

Ext.create('Ext.grid.Panel', {
  title: 'My Grid',
  store: myStore
  columns: [
    {
      header: 'Image', 
      dataIndex: 'imgUrl',
      renderer: function(imgUrl, meta, record) {

        // Add a mouse-over / tooltip that shows the name
        meta.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(record.getName()) + '"';

        return '<img src="' + imgUrl + '">';
      }
    }
  ]
});

Answer 1

<img>タグの代わりに CSS background-image を使用すると問題が解決することがわかりました(Chrome でのみテスト済み)。例：

Ext.create('Ext.grid.Panel', {
  title: 'My Grid',
  store: myStore
  columns: [
    {
      header: 'Image', 
      dataIndex: 'imgUrl',

      width: 16, // The width of the background-image

      renderer: function(imgUrl, meta, record) {

        // Add a mouse-over / tooltip that shows the name
        meta.tdAttr = 'data-qtip="' + Ext.String.htmlEncode(record.getName()) + '"';

        meta.tdAttr += 'style="background-image: url(\'' + imgUrl + '\'); background-repeat: no-repeat;"';
      }
    }
  ]
});