Question

I have the following control:

app.views.MapControl = Ext.extend(Ext.Panel, 
{
    style: { background:'white' },
    items:
    [{ xtype: 'panel',
       id: 'mapContainer',
       width: 1700, 
       height: 1124,
       html: "<img class='mapImg' style='width:100%; height:100%; 
              padding:0; margin:0' src='imagery/tube_map.gif'>" 
     }],

After the control’s rendering I am adding a few items dynamically like that:

      var newPin = new app.views.Pushpin({x:pinPosX, y:pinPosY});
      this.theMap.add(newPin);

The Pushpin control looks like this:

    app.views.Pushpin = Ext.extend(Ext.Panel, {
           xtype: 'panel',
       style: { background: 'url(imagery/pin.png)' },
       width: 50,
       height: 50,
       x: 0,
       y: 0

The problem:

When I don’t add any pins dynamically then the tube map image show fine. But if I add any, then for every pin I add there is a 50px offset appearing above from the tube map.

Why is that? Could anyone please suggest any work-around?

Thank you in advance.

Answer 1

The pins are still taking up space. Add position: absolute; to their style.