在面板的占位符上插入的图像无法正确呈现

Question

关于在面板占位符中使用 insert() 添加的 xtype: 'image' 组件，我遇到了这个奇怪的问题：

面板：

{
  xtype: 'panel',
  collapsed: true,
  region: 'east',
  collapsible: true,
  split: true,
  . . . 
  listeners: {
    afterrender: function (panel) {
      if (panel.placeholder) {
        panel.placeholder.insert(1,
          {
            xtype: 'image',
            src: 'myImage.png',
            margin: '10 0'
          }
        );
        panel.placeholder.setTitle('');
      }
    }
  }
}

所以问题是，我在占位符中添加的图标显示不正确，左侧设置为 9px，而应为 0:

但是在展开所述面板然后再次折叠之后，图像可以正确显示。可能是什么原因？我的插入正确吗？

注意： Extjs 使用图像的边距配置来定位元素。但是，图像的 left 属性被设置为 9px。我已经尝试过：margin: '10 0 10 0' 甚至 margin: '10 5' 或 margin: '10 5 10 5' 但图像仍被设置为 left: 9px 这让我认为 L/R 边距没有被计算在内为了。但是当设置 margin: 10 时，L/R 边距被计算在内。

编辑：根据@Tejas1991 的要求，这是一个有效的 fiddle 供参考。

尝试运行 fiddle。正如您所注意到的，东面板的图像位置不正确。现在，尝试展开面板然后再次折叠它。瞧！

Answer 1

嗯，看来您必须提供图像的 width 才能将其正确添加到占位符中。

panel.placeholder.insert(1, {
  xtype: 'image',
  src: 'myImage.png',
  margin: '10 0',
  width: 25
});

在面板的占位符上插入的图像无法正确呈现

Inserted image on panel's placeholder not rendering correctly

extjs

extjs4.2