Ext.Resizable needs a constrainTo option.

[Animal]

Ext.Resizable resizes any element. It is applied to BasicDialog (and also to the new Ext2.0 Window class)

Resizability, and draggability are related in that draggable constraints should be applied to resizability so that a resizable element should not be allowed to be resized so that a boundary goes outside its drag constraint area.

BasicDialog has the "container" config option (though not fully implemented), and Ext2.0 Window seems to have this too, in that dragging is constrained to top:0 left:0. (But resizability isn't, and in the (alpha code, so I know it's not going to be perfect) demo you can resize a Window so that its title bar becomes in accessible), so...

Resizability should be configurable to be resizable only within a certain container element.

I have added the following code at the beginning of Resizable.onMouseMove. My addition in bold:



Ext.override(Ext.Resizable, {
onMouseMove : function(e){
if(this.enabled){
try{// try catch so if something goes wrong the user doesn't get hung

// Ignore drag gestures that are outside the constrainTo Element.
var eventXY = e.getXY();
if (this.constrainTo) {
var viewport = Ext.get(this.constrainTo).getBox(true);
if ((eventXY[0] < viewport.x) || (eventXY[0] > viewport.right) ||
(eventXY[1] < viewport.y) || (eventXY[1] > viewport.bottom)) {
return;
}
}
//...snip...
});


That's not perfect because resize handles are a few pixels wide, and a mouse move within the container may still move the boundary outside the container, but it's a start...

Also, I've added this to BasicDialog which makes it obey dragging constraints, and, with the above change, resizing constraints. My changes in bold:



Ext.override(Ext.BasicDialog, {
startMove : function(){
if(this.proxyDrag){
this.proxy.show();
}
if(this.constraintoviewport !== false){
this.dd.constrainTo(this.container || document.body, {right: this.shadowOffset, bottom: this.shadowOffset});
}
},

// private
beforeResize : function(){
this.resizer.constrainTo = this.container;
this.resizer.minHeight = Math.max(this.minHeight, this.getHeaderFooterHeight(true)+40);
}
});


Looking to the future, and Ext 2.0, perhaps Ext.Resizable should also handle dragging its Element as well as resizing it?

It has resize "handles", so perhaps it could also handle being given a drag "handle", and take care of the moving of an element.

So these two related operations would be handled in one class and could share the same constraints easily.

Dialogs and Windows, would just hand their title bars to their resize handlers to be draggable rather than handle moving themselves?

[jack.slocum]

It's already in Ext 2.0, only I did it a little different. It also supports a resizeRegion. I will back port it for Ext 1.1 (should be simple) and check it in.

[Animal]

As usual, =D> =D>

You're ahead of things! Great job Jack.

[MD]

Out of curiosity (though it may already exist in 2.0), is there still intention to beef up the constrainTo/resizeRegion in Ext.Resizable? As of 1.1.1, the issue still remains in that the constraining is being done based on the mouse coordinates, rather than on the element being resized. The trouble with this is that, depending on the size of the handles, the element can be resized well beyond the bounds of the resizeRegion, which is less than ideal. There've been a few methods of getting it sort of working, but even those introduce problems such as losing draggability when getting near the bounds, etc.

-MD

[y0y]

I've also been having issues with resizable and attempting to get it to constrain. I tried a solution very much the same as your mousemove event solution and got about the same results.

One other thing about resizable, and this is a bit tangental, is it possible to use it to treat a div more like a selection box which would allow you to resize into negative space. As in, if I have a div with 100px width and grab the east handle and drag it over the west border, allowing it to continue to resize west and have positive width again in the opposite direction. I haven't been able to figure that one out.. or if it's even easily done with the library as is.

[mystix]

One other thing about resizable, and this is a bit tangental, is it possible to use it to treat a div more like a selection box which would allow you to resize into negative space. As in, if I have a div with 100px width and grab the east handle and drag it over the west border, allowing it to continue to resize west and have positive width again in the opposite direction. I haven't been able to figure that one out.. or if it's even easily done with the library as is.

:-? you could cheat and drop the east handle + pick up the west handle when they meet at the same point...