[Ext 4.x] Using the constrainTo Property with a Region is broken in ComponentDragger

[UGA_Zimma]

Hey All,

When I am using a Region defined constrainTo property the Region constantly is adjusted and shrinking. I found the fix in the calculateConstrainRegion function of ComponentDragger. The me.initialConstainTo is being set equal to c and then c is adjusted which changes initialConstainTo. then everytime you drag the element it adjusts the constrainTo Region even more. To fix this we need a copy of the initial Reagion not the pointer to the config that will keep getting adjusted, i.e. - me.initialConstainTo.copy(). (or something of the sorts)

Thanks,

UGA_Zimma

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[UGA_Zimma]

Thanks!

Here is the override for anyone interested:

Ext.override(Ext.util.ComponentDragger, {

    calculateConstrainRegion : 
function() {

        
var me = this, comp = me.comp, c = me.initialConstrainTo, delegateRegion, elRegion, dragEl = me.proxy ? me.proxy.el : comp.el, shadowSize = (!me.constrainDelegate && dragEl.shadow && !dragEl.shadowDisabled) ? dragEl.shadow.getShadowSize() : 0;


        
// The configured constrainTo might be a Region or an element

        
if(!( c instanceof Ext.util.Region)) {

            c = Ext.fly(c).getViewRegion();

        } 
else {
            c = me.initialConstrainTo.copy();

        }


        
// Reduce the constrain region to allow for shadow

        
if(shadowSize) {

            c.adjust(shadowSize[0], -shadowSize[1], -shadowSize[2], shadowSize[3]);

        }


        
// If they only want to constrain the *delegate* to within the constrain region,

        
// adjust the region to be larger based on the insets of the delegate from the outer

        
// edges of the Component.

        
if(!me.constrainDelegate) {

            delegateRegion = Ext.fly(me.dragTarget).getRegion();

            elRegion = dragEl.getRegion();


            c.adjust(delegateRegion.top - elRegion.top, delegateRegion.right - elRegion.right, delegateRegion.bottom - elRegion.bottom, delegateRegion.left - elRegion.left);

        }

        
return c;

    }

});