PDA

View Full Version : Hbox overflow



Daniels
6 Jul 2010, 11:06 AM
Have a way for I put the component below when the width overflows on hbox layout?

Animal
6 Jul 2010, 11:13 AM
Sounds like you need my FloatLayout layout manager.

Daniels
6 Jul 2010, 11:41 AM
Yes, this is exactly what I need.

Thank you for helping me.

Daniels
7 Jul 2010, 5:46 AM
When I set the horizontalAlign to right, the layout only moves the component to the right side. That is correct? I think that the right behavior is do that and reverse the component sequence too.

Animal
7 Jul 2010, 6:14 AM
"right"? According to what?

Daniels
7 Jul 2010, 6:36 AM
The following code should generate the sequence Panel 2, Panel 1 on the right side, right? The float property does that. But The code generates Panel 1, Panel 2 on the right side and don't makes the inversion.


var window = new Ext.Window({
layout : "float",
layoutConfig : {
horizontalAlign : "right"
},
height : 300,
width : 300,
defaults : {
frame : true,
},
items : [{
title : 'Panel 1',
height : 100,
width : 120
},{
title : 'Panel 2',
height : 75,
width : 100
}]
});
window.show();

Is something I'm doing wrong? Maybe horizontalAlign isn't the right property. The documentation says the layout is similar to float property, so the behavior that I'm expecting is correct.

Animal
7 Jul 2010, 7:28 AM
Yes, it should work. There's a bug somewhere.

adjustRow should bump all items in the row "spareWidth" pixels to the right which should right justify the row.




adjustRow: function(boxes, rowStart, rowEnd, rowHeight, rowWidth, availWidth) {
var i, c, h, j = 0, spareWidth = availWidth - rowWidth, gaps = rowEnd - rowStart, alignmentIncrement = 0;

switch (this.horizontalAlign) {
case 'middle':
case 'center':
alignmentIncrement = Math.max(spareWidth / 2, 0);
break;
case 'right':
alignmentIncrement = Math.max(spareWidth, 0);
break;
case 'justify':
if (gaps) {
j = Math.max(spareWidth / gaps, 0);
}
}


See if you can figure it out.

Animal
7 Jul 2010, 7:31 AM
Oh, you mean RTL flow?

No, it doesn't do that yet.

Animal
7 Jul 2010, 7:42 AM
Change this fn




updateChildBoxes: function(b) {
var a = {},
i = 0,
l = b.length;
for (; i < l; i++) {
if (this.animate) {
a = {
top: {
to: b[i].top
}
};
if (this.rtl) {
a.right = {
to: b[i].left
};
} else {
a.left = {
to: b[i].left
};
}
Ext.lib.Anim.motion(b[i].component.getPositionEl().dom, a).animate();
} else {
b[i].component.setPosition([b[i].left, b[i].top]);
}
}
},


Then Add the extra CSS rule so that the positioning using the "right" style works.



.x-box-item {
left: auto;
}


There you go. The "rtl" config option.

Daniels
7 Jul 2010, 8:05 AM
It works, thank you.

I've changed the "animate if" to down, now it also works without animate. But... after the changes, the property horizontalAlign : "right" is ignored by the layout. I'll try to fix it, I'll post the results as soon as I can.

Animal
7 Jul 2010, 9:17 AM
Well look at the code. If not animated it uses setPosition which is a simple x/y coordinate. It needs to set the positioning styles.

Daniels
7 Jul 2010, 9:43 AM
I've changed the method and appears to works fine. Here is the code:



var width = this.container.getLayoutTarget().getWidth();
var lastX = 0;
var lastY = -1;
for (var i = 0, l = b.length; i < l; i++) {
if(this.rtl) {
lastX = (lastY == b[i].top ? lastX : width) - b[i].width;
lastY = b[i].top;
b[i].left = lastX;
}
if (this.animate) {
Ext.lib.Anim.motion(b[i].component.getPositionEl().dom, {left: {to: b[i].left}, top: {to: b[i].top}}).animate();
} else {
b[i].component.setPosition([b[i].left, b[i].top]);
}
}