Eingefügt Bild auf Platzhalter Panel-Rendering nicht korrekt

Question

Ich habe dieses seltsames Problem in Bezug auf mit einer xtype: 'image' Komponente hinzugefügt insert() in einem Panel des Platzhalter verwenden:

Panel:

{ 
    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(''); 
     } 
    } 
    } 
} 

so ist Problem, das Symbol I hinzugefügt

: in dem Platzhalter nicht korrekt angezeigt wird, wird links auf 9px gesetzt wird, wenn es sollte 0 sein

, aber nach dem Erweitern des besagten Panels und dem anschließenden Kollabieren wird das Bild korrekt angezeigt. Was könnte der Grund gewesen sein? Mache ich den Einsatz richtig?

HINWEIS: Die Randkonfiguration für das Bild wird von Extjs verwendet, um das Element zu positionieren. Die left Eigenschaft des Bilds wird jedoch auf 9px festgelegt. Ich habe versucht: margin: '10 0 10 0' oder sogar margin: '10 5' noch margin: '10 5 10 5', aber immer noch wird das Bild left: 9px gesetzt, was mich denken lässt, dass die L/R Ränder nicht berücksichtigt werden. Bei der Einstellung margin: 10 werden die L/R Ränder jedoch berücksichtigt.

EDIT: Hier ist eine funktionierende fiddle als Referenz, wie nach @ Tejas1991 Anfrage.

Versuchen Sie, die Geige zu laufen. Wie Sie sehen können, ist das Bild von East Panel nicht richtig positioniert. Versuchen Sie nun, das Panel zu erweitern und dann erneut zu reduzieren. Voila!

Answer 1

Nun, scheint so, als müssten Sie das width des Bildes angeben, damit es korrekt zum Platzhalter hinzugefügt wird.

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