View Full Version : [FEATREQ][3.0rc1] Resize constrainTo functionality poorly implemented

19 Apr 2009, 8:34 AM
This issue may exist in previous versions of Ext, but I am currently only working with the 3.0RC.

This is only a border-line bug - given the definition, I don't believe this is behaving as designed, so I'm going to report it as a bug.

Currently the way constrainTo works is by creating an "overlay" div which allows the resizer to track mouse movements accross the entire page. This is presumably to allow you to resize the element clear to the boundaries of its container and affect its size while the mouse is outside of the container itself. Thus, if you resize an element to the full width of the container and your mouse is now outside of the container element, you could still move your mouse vertical and affect the resizable element's height until it reaches the upper bound.

This looks to be the intended behavior (otherwise the overlay would be pointless), however right now the resizing simply stops once your mouse is outside of the container window. This presents two problems:

1. You can no longer resize on the other axis once your mouse is out of the container
2. It makes it very difficult to resize an element to the full height or width of its parent container unless you move your mouse extremely slowly.

In the end, it looks clumsy at best, broken at worst.

The fix is actually quite simple:

In Resizable.js at line 417 is this snippet (part of the mouseMove event handler):

if(this.resizeRegion && !this.resizeRegion.contains(e.getPoint())) {

This shortcut simply stops resizing all together if the mouse event was located outside of the container's boundary.

A better way of handling this is to get rid of that control block all together, and instead add this snippet at line 566, just before the actual resize takes place:

if(this.constrainTo && this.resizeRegion) {
/** Have we exceeded the bounds? */
if ((x + w) > this.resizeRegion.right) {
w = (this.resizeRegion.right - x);

if ((y + h) > this.resizeRegion.bottom) {
h = (this.resizeRegion.bottom - y);

if (x < this.resizeRegion.left) {
var xDiff = this.resizeRegion.left - x;
x = this.resizeRegion.left;
w = w - xDiff;

if (y < this.resizeRegion.top) {
var yDiff = this.resizeRegion.top - y;
y = this.resizeRegion.top;
h = h - yDiff;

var currentRegion = this.proxy.getRegion();
if (currentRegion.left != x || currentRegion.right != (w +x)
|| currentRegion.top != y || currentRegion.bottom != (y + h)) {

this.proxy.setBounds(x, y, w, h);

Everything from 566 to the catch() block should be replaced with the code above.

This creates a much smoother feel to the resizable element, and it behaves like most other resizable containers we are used to in other applications and even other JS frameworks. One other note, also, is that the "draggable" property works, but it doesn't work along with constrainTo - as in, dragging isn't constrained while resizing is.

A simple test case for this is as follows:


#container {
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
border: 1px solid red;

#resizable {
width: 200px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
border: 1px solid #d0d0d0;
background: #fefefe;
<link rel="stylesheet" type="text/css" href="PATH_TO_EXT_ALL_CSS" />
<script type="text/javascript" src="PATH_TO_EXT-ALL"></script>
<script type="text/javascript">
var resizable = new Ext.Resizable('resizable', {
handles: 'all',
minWidth: 1,
minHeight: 1,
constrainTo: 'container',
draggable: true
<div id="container">
<div id="resizable">

Using that you can see that:

1. Even though I've set constrainTo, I can still drag the element out of the container.
2. With constrainTo set, resizing is clunky and clumsy once my mouse gets outside of the container's boundary. Even resizing to the very edge can be difficult if the mouse is moving at a high rate of speed.

7 Jul 2009, 1:49 PM
I am curious is this is fixed in the released version of 3.0.

I am fussing with the same basic issue (my resizable does preserve ration, so when I drag it horizontally inside my constrained region, it can grow vertically beyond the region, and vice versa), and while I realize I can override it with the solution here, I'd hate to do that if I know the official code addresses it.

Ralph Haygood
25 Aug 2011, 9:22 PM
y0y: Thanks! You just saved me a significant amount of time.