PDA

View Full Version : [REOPEN-103][3.0.0] DD of Resizable does not listen to constrainTo



robincasey
22 Jul 2009, 2:54 AM
On the ExtJS examples page of Resizables, run:

var div = Ext.DomHelper.insertBefore(document.body.firstChild, {
tag: "div",
style: "background:#ff0;width: 200px;height: 300px;"
});
var img = Ext.DomHelper.append(div, {
tag: "img",
src: "zack.jpg",
height: 100
})
var transparent = new Ext.Resizable(img, {
wrap: true,
dynamic: true,
draggable: true,
constrainTo: div
});I am expecting the Resizable, when draggable, not to be able to be dragged out of the constrainTo area.


Added:
transparent.dd.constrainTo(transparent.constrainTo); is a possible patch

mjlecomte
22 Jul 2009, 10:44 AM
Thanks for this and the other specific reports (not lumped together).

I also noted that when resizing I can sometimes resize that resizable item slightly outside of the div. Play with it a little bit though, sometimes it constrains inside, but depending where you drag it, it doesn't constrain the resizing either.

david l
7 Aug 2009, 12:45 PM
I got the constrainTo part to work, but the problem described in the post above is what I am running in to now
http://extjs.com/forum/showthread.php?p=370607#post370607

david l
8 Aug 2009, 2:29 PM
I do believe I fixed the problem with the resized element not being constrained correctly...

the patch below should fix it in addition to the fix in the link to the other post to initialize it


Ext.override(Ext.Resizable, {
resizeElement : function(){
var box = this.proxy.getBox();
if(this.updateBox){
this.el.setBox(box, false, this.animate, this.duration, null, this.easing);
}else{
this.el.setSize(box.width, box.height, this.animate, this.duration, null, this.easing);
}
this.updateChildSize();
if(!this.dynamic){
this.proxy.hide();
}
//////////////////
if(this.draggable && this.constrainTo) {
this.dd.resetConstraints();
this.dd.constrainTo(this.constrainTo);
}
//////////////////
return box;
}
});

ludoo
6 Sep 2009, 11:16 PM
This patch works well only if item has been resized before.
Try to drag item inside container before resizing, then constraints won't be applied.

May be an init problem ?

david l
7 Sep 2009, 5:22 PM
look at the url in post #4, it has the init changes as well

evant
26 Nov 2009, 3:50 AM
Fix applied to svn in rev #5679 for patch release 3.1.

Thanks for the patch.

art.home.ext
2 Mar 2010, 1:44 PM
Regression in 3.1.1 :[???-670] DragDrop constrainTo after container resize (http://www.extjs.com/forum/showthread.php?p=441969#post441969)

Jamie Avins
2 Mar 2010, 2:09 PM
Reopened, closing 670 as a duplicate.

robincasey
9 Nov 2010, 1:17 PM
(backRef: showthread.php?75234-OPEN-91-3.0.0-Resizable-preserveRatio-constrainTo&p=448540 (http://www.sencha.com/forum/showthread.php?75234-OPEN-91-3.0.0-Resizable-preserveRatio-constrainTo&p=448540#post448540))

http://www.youtube.com/watch?v=4zy-u4Cahk0

robincasey
26 Sep 2011, 2:50 PM
"Jiggling" the resizable out of bounds is fixed :), but part of the issue remains:


When resizing horizontally, vertical boundingbox is not honored.
When resizing verti.., vice versa ^


Problem easily spottable via running:


var div = document.createElement('div');
div.id='myDiv';
div.setAttribute('style','background:#ff0;width:500px;height:300px;');

var img = document.createElement('img');
img.id='myImg';
img.src='grass.jpg';
div.appendChild(img);

document.body.appendChild(div);

Ext.create('Ext.resizer.Resizer', {
target: 'myImg',
preserveRatio: true,
constrainTo: 'myDiv'
});

on http://dev.sencha.com/deploy/ext-4.0.2a/examples/resizer/basic.html

Dragging horizontally or vertically will make the resizable break-out of the "other" constraint.

astagl
22 Jun 2012, 12:05 PM
"Jiggling" the resizable out of bounds is fixed :), but part of the issue remains:

When resizing horizontally, vertical boundingbox is not honored.
When resizing verti.., vice versa ^

Problem easily spottable via running:


var div = document.createElement('div');
div.id='myDiv';
div.setAttribute('style','background:#ff0;width:500px;height:300px;');

var img = document.createElement('img');
img.id='myImg';
img.src='grass.jpg';
div.appendChild(img);

document.body.appendChild(div);

Ext.create('Ext.resizer.Resizer', {
target: 'myImg',
preserveRatio: true,
constrainTo: 'myDiv'
});

on http://dev.sencha.com/deploy/ext-4.0.2a/examples/resizer/basic.html

Dragging horizontally or vertically will make the resizable break-out of the "other" constraint.

damn, this is what I'm running into right now with a project I'm working on. It pains me to see that this was never addressed. I might have to scrap this and go with something else. I think that jQuery might have something that would fit in place of resizable.

Nom4d3
25 Oct 2012, 9:10 AM
No solution for this problem yet?