Moving absolutely positioned components [Archive]

dontbugme

24 Aug 2011, 4:15 PM

I am working on a page where I am trying to move components which belong to a panel which has an absolute layout. It kind of works if I manipulate the component's element top/left, but as it is manipulated further, and as more items are added to the container dynamically, the layout gets screwed up. I thought I'd try setting the x and y properties on the component itself and letting the layout manager worry about positioning, but I can't seem to get it to work. It looks as if calls to the container's doLayout() does not update positioning.

Here's a code sample which shows a symptom of what I am running into:

<html>
<head>
<title>Area Chart Tips Bug</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 1000,
height: 1000,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'absolute',
items:[{
xtype: 'button',
text: 'Click me',
x: 50,
y: 50,
handler: function(){
if(this.moved === true){
this.panel.x = 800;
this.panel.y = 800;
this.ownerCt.doLayout();
}
else{
this.panel = {
xtype: 'panel',
x: 300,
y: 300,
movable: true,
width: 95,
height: 105,
title: 'adsf'
};
this.moved = true;
this.ownerCt.add(this.panel);
}
}
}]
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>

</body>
</html>

This little example has a button that when clicked the first time will spawn an absolutely positioned panel. Clicking it a second time will change the panel's x and y values and call doLayout on the parent container. I'd expect this to move the panel to its new coordinates but it does not work. Am I doing something wrong, or is this a bug?

jay@moduscreate.com

24 Aug 2011, 6:45 PM

Your first issue is that this.panel points to a plain object, not an instance of Ext.panel.Panel.

var panel = this.items.items[0];
panel.x = 100;
panel.y = 300;
this.ownerCt.doLayout();

dontbugme

25 Aug 2011, 7:50 AM

I modified the example to explicitly create panel as an Ext.panel.Panel, but I'm still unable to get it to move on the second mouse click. I am able to move the panel if I call panel.el.setX/setY/etc. but in my real application, this does not play nicely with the layout manager. I'm pretty stumped at this point and am beginning to think this is a bug, since you'd think that by having the parent container recalculate its layout, it would take into account new x and y values for its children.

<html>
<head>
<title>Area Chart Tips Bug</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.5/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.5/bootstrap.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 1000,
height: 1000,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'absolute',
items:[{
xtype: 'button',
text: 'Click me',
x: 50,
y: 50,
handler: function(){
if(this.moved === true){
var panel = this.ownerCt.items.items[1]; // 0 is the button, 1 is the panel.
panel.x = 800;
panel.y = 800;
this.ownerCt.doLayout();
}
else{
this.panel = Ext.create('Ext.panel.Panel', {
x: 300,
y: 300,
width: 95,
height: 105,
title: 'adsf'
});
this.moved = true;
this.ownerCt.add(this.panel);
}
}
}]
}],
renderTo: Ext.getBody()
});
});
</script>
</head>
<body>

</body>
</html>

dontbugme

25 Aug 2011, 3:06 PM

I figured out the issue. I am not sure whether it's a bug or by design, but a container with an absolute layout is not tagging its child components with position:absolute. In my real page, which consists of a table of draggable and resizeable panels that are created when a user drags in a leaf from a tree (think dashboard designer, snap-to-grid, etc.) the panel was doing its top/left calculations on its child components as if they were absolutely positioned. But because they were not given that style, they were moving around relative to one another as things were added/removed/resized.

The combination of setting the container's layout to absolute and adding 'position:absolute' to each child component during their instantiation has resolved this issue, and they are all now being positioned absolutely again.