(NEWBIE) Absolute Layout not positioning components

[npintos]

Hello,

I'm trying to do something really simple, render a panel with two buttons positioned one over the other, with some blank space between. Here's the code:

var panelBotones = new Ext.Panel({
    layout: 'absolute',
    frame: true,
    width: 88,
    height: 350,
    items:[
        {
            xtype: 'button',
            x: 15,
            y: 10,            
            text: 'Agregar ->'            
        },{
            xtype: 'button',
            x: 15,
            y: 200,        
            text: '<- Eliminar'            
        }
    ]
    
});

Attached you'll see how it si rendered in Firefox and, even worse, in IE6. No Firebug errors are thrown.

I think this must be reaaaally simple, but i've looked through all the examples and can't see anything wrong with my code!

Any hint?

Thanks a lot!

[Animal]

In Ext 2.1, a Button is not a BoxComponent, and so cannot participate in a layout.

In Ext 3, Buttons are BoxComponents.

[npintos]

ok! so i guess i have to put the each button into a panel and then add them to the main panel.


Thanks a lot!!

[Animal]

Obviously not as a child element of a Panel, but as a footer Button using the buttons config. Might work.

[npintos]

Obviously not as a child element of a Panel, but as a footer Button using the buttons config. Might work.

Why 'obviously'? Actually it looks better when i add the buttons as child elements; as footer buttons, there's some automatic left padding added...

[Animal]

Yes, you're right, you'll be OK with that.

ContainerLayout (The default layout Manager) does not attempt to perform any sizing operations, so it actually doesn't matter whether what it renders is a BoxComponent. It can just be a Component.

Just use a Container rather than a Panel though:

{
    xtype: 'container',
    autoEl: {},
    items: {
        xtype: 'button',
        x: 15,
        y: 10,            
        text: 'Agregar ->'
    }
}

[npintos]

I'm afraid that using a container is not working:

var panelBotones = new Ext.Container({
    layout: 'absolute',
    //frame: false,
    width: 85,
    height: 350,
    autoEl: {},    
    items:[
        {            
            x: 2,
            y: 100,            
            xtype: 'button',
            width: 83,
            text: 'Agregar ->'    
                                                
        },{            
            x: 2,
            y: 280,                                
            xtype: 'button',
            width: 83,
            text: '<- Eliminar'                
        }
    ]    
});

because the buttons, again, overlap. But don't worry, using panels, and buttons as children of them, is more than ok for me. Thanks again!!

Yes, you're right, you'll be OK with that.

ContainerLayout (The default layout Manager) does not attempt to perform any sizing operations, so it actually doesn't matter whether what it renders is a BoxComponent. It can just be a Component.

Just use a Container rather than a Panel though:

{
    xtype: 'container',
    autoEl: {},
    items: {
        xtype: 'button',
        x: 15,
        y: 10,            
        text: 'Agregar ->'
    }
}

[Animal]

NO.

You ignored what I said.

Read it again.

Put EACH BUTTON IN A CONTAINER.

[Animal]

var panelBotones = new Ext.Container({
    layout: 'absolute',
    //frame: false,
    width: 85,
    height: 350,
    autoEl: {},    
    items:[{
        xtype: 'container',
        autoEl: {},
        items: {       
           x: 2,
           y: 100,            
           xtype: 'button',
           width: 83,
           text: 'Agregar ->'    
        }                            
    },{
        xtype: 'container',
        autoEl: {},
        items: {
            x: 2,
            y: 280,                                
            xtype: 'button',
            width: 83,
            text: '<- Eliminar'                
        }
    }]
});

[Animal]

On another note, are you really sure you need to use AbsoluteLayout?

Why not table layout?