View Full Version : Ext.Resizable's drag constrainto

david l
6 Aug 2009, 11:58 AM
So for the Ext.Resizable, I am trying to constrain the dragging to the region of another element using the drag n drop function constrainTo (from DDCore.js)

what I did was edit /src/widgets/Resizable.js ...

/////////original code///////////
// this.dd = this.dynamic ?
// this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
//////////editted code///////////
this.dd = this.dynamic ?
this.el.initDD(null, {}, {
startDrag : function(){
this.el.initDDProxy(null, {dragElId: this.proxy.id}, {
startDrag : function(){

I have tried hardcoding this.constrainTo.id to the actual id of the element I want it to be constrained to, but still no dice

Am I approaching this the wrong way?

6 Aug 2009, 12:27 PM
? i was able to get resizable and DDProxy to work without all that mess, both to constrain to a specific element, which has a fixed size.

6 Aug 2009, 12:28 PM
can you post a publically available demo?
Basically, i leveraged the component and container model to take care of cleanup for me. Each 'child' (BoxComponent) for the 'canvas' (Container) had a DDProxy and resizable attached to it.

this.resizable = new Ext.Resizable(this.el, {
wrap : false,
minWidth : 50,
minHeight : 50,
transparent : false,
animate : true,
handles : 'all',
constrainTo : ownerCt,
listeners : {
scope : this,
resize : this.onAfterResize

david l
6 Aug 2009, 1:24 PM
I dont have ExtJS on an online server just yet, so I will do my best to describe what I have

my code basically has the following (using Ext.Resizable in a Ext.Layer):

var layer1 = new Ext.Layer({
id: 'mainlayer',
constrain: true,
zindex: 5000
layer1.update("<img src='box-large.jpg' />");

var layer3 = new Ext.Layer({
constrain: true,
zindex: 9000

layer3.update("<img id='wrapped' src='box-small.jpg' />");

var wrapped = new Ext.Resizable('wrapped', {
minHeight: 50,,
draggable: true,
handles: 'all',
dynamic: true,
constrainTo: layer1,
resizeRegion: layer1

what I am trying to accomplish is to have the box-small.jpg layer (layer3) draggable only within the perimeter of the box-large.jpg layer (layer1)...ie: no part of box-small should go outside box-large

currently box-small is able to go outside of the box-large perimeter

also, dont think this makes much of a difference, but there will be more layers that dynamically get added/updated that go on top of the mainlayer

david l
7 Aug 2009, 12:41 PM
I made a simple change to ext-all-debug.js and got it working

this.dd = this.dynamic ?
this.el.initDD(null) : this.el.initDDProxy(null, {dragElId: this.proxy.id});
this.dd.setHandleElId(this.resizeChild ? this.resizeChild.id : this.el.id);
this.dd.constrainTo(this.constrainTo); //grabs constrainTo from Ext.Resizable config

then i editted ext-all.js and looked for the corresponding section to edit (column 303028) and now i can put this behind me

david l
7 Aug 2009, 12:50 PM
now ive ran into another problem, when i resize the element and drag it around, it seems to be restricted in movement to the original size of the element

when the element is shrunk, it gets confined to same movement as the original size
if its enlarged, it can go out of the constrained region while movement is still the same as the original

im thinking my problem might lie in the layer thats associated with the resizable is not being updated to the size of the element it contains

david l
8 Aug 2009, 2:31 PM
fix to the problem described above can be found here