PDA

View Full Version : (NEWBIE) Absolute Layout not positioning components



npintos
1 Jul 2008, 1:27 AM
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
1 Jul 2008, 1:44 AM
In Ext 2.1, a Button is not a BoxComponent, and so cannot participate in a layout.

In Ext 3, Buttons are BoxComponents.

npintos
1 Jul 2008, 1:50 AM
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
1 Jul 2008, 1:53 AM
Obviously not as a child element of a Panel, but as a footer Button using the buttons config. Might work.

npintos
1 Jul 2008, 2:10 AM
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
1 Jul 2008, 3:51 AM
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
1 Jul 2008, 4:02 AM
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
1 Jul 2008, 4:17 AM
NO.

You ignored what I said.

Read it again.

Put EACH BUTTON IN A CONTAINER.

Animal
1 Jul 2008, 4:19 AM
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
1 Jul 2008, 4:20 AM
On another note, are you really sure you need to use AbsoluteLayout?

Why not table layout?

npintos
1 Jul 2008, 5:08 AM
If I use a table layout with one column, the buttons appear one above the other, and i want them centered and vertically separated. Probably there's a clean way of doing this with styles, but i have very little knowledge of CSS, and I think using a panel with two subpanels is an, more or less, elegant way.

(By the way, your code using Containers does not work...but again, the problem is already solved :))


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

Why not table layout?

Animal
1 Jul 2008, 5:33 AM
Use a table with two columns then!