0

我使用返回 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 + '">';
      }
    }
  ]
});
4

1 回答 1

0

我发现使用 CSS 背景图像而不是<img>标签可以解决问题(仅使用 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;"';
      }
    }
  ]
});
于 2012-07-13T21:23:50.020 回答