[4.2.0.489] position problem: floating with constrainTo / renderTo

[christophe.geiser]

Hi all,
I have some difficulties to make this component combination work again with 4.2. The test case below should illustrate the fact that the positioning of the floating panel within the window is not correctly calculated (but was with 4.1 series): you cannot drag it to the top left corner.

I know this is not a standard way to build components (renderTo + constainTo + floating + not registered in layout), but that was the only way I could find to for situation like the attached picture, where dashboard elements can be dragged around within the central component, which itself is within a floating window.

Ext.onReady(function(){
       
    var win = Ext.create('widget.window', {
        height: 500,
        width: 500,
        x: 100,
        y: 250,
        title: 'Constraining Window, plain: true',
        closable: false,
        plain: true
        //layout: 'absolute',
    });
    win.show();
 


  panel = Ext.create('widget.panel', {
    title:"floatingPanel",
    width: 100,
    height: 100,
    x:100,
    floating: true,
    constrain: true,
    draggable:true,
    constrainTo : win.getEl(),
    renderTo: win.getEl()
  });
});

Cheers,
C.Screenshot at 2013-02-16 10:55:41.jpg

[christophe.geiser]

For what it's worth, here is a dirty/quick fix (the problem in this situation is that we don't have a floatParent, even though we should calculate the position relative to a constraining parentNode ):

Ext.define(null,{    override: "Ext.util.Positionable",
    calculateConstrainedPosition: function(constrainTo, proposedPosition, local, proposedSize) {
        var me = this,
            vector,
            fp = me.floatParent,
            floatingConstrainTo = me.floating && me.constrainTo,
            parentNode = fp 
                ? fp.getTargetEl() 
                : floatingConstrainTo
                    ? me.constrainTo : null,
            //parentNode = fp ? fp.getTargetEl() : null,
            parentOffset,
            borderPadding,
            proposedConstrainPosition,
            xy = false;


       // if (local && fp) {
        if (local && parentNode) {
            parentOffset = parentNode.getXY();
            borderPadding = parentNode.getBorderPadding();
            parentOffset[0] += borderPadding.beforeX;
            parentOffset[1] += borderPadding.beforeY;
            if (proposedPosition) {
                proposedConstrainPosition = [proposedPosition[0] + parentOffset[0], proposedPosition[1] + parentOffset[1]];
            }
        } else {
            proposedConstrainPosition = proposedPosition;
        }
        
        constrainTo = constrainTo || me.constrainTo || parentNode || me.container || me.el.parent();
        vector = (me.constrainHeader ? me.header.el : me.el).getConstrainVector(constrainTo, proposedConstrainPosition, proposedSize);


        
        if (vector) {
            xy = proposedPosition || me.getPosition(local);
            xy[0] += vector[0];
            xy[1] += vector[1];
        }
        return xy;
    }
    });

C.

[Animal]

Does it not work if you go down the standard route of adding those floating components as items of the centre region?

Containers now have a collection of floating items which are managed outside of any layout. These can be constrained within their parent.

var win = Ext.create('widget.window', {
    height: 300,
    width: 300,
    x: 10,
    y: 10,
    title: 'Constraining Window, plain: true',
    closable: false,
    plain: true,
    items: {
        title: "floatingPanel",
        x:100,
        width: 100,
        height: 100,
        floating: true,
        draggable: true,
        constrain: true,

        // Do not use default Panel dragging: use window type dragging
        initDraggable: Ext.window.Window.prototype.initDraggable
    }
});
win.show();

// Floating components begin hidden
win.floatingItems.items[0].show()

[christophe.geiser]

Thanks a lot for your answer Animal, it forced me to successfully revise and simplify part of my code.
The problem was that I had to use the renderTo trick under 4.1 because there was a rendering issue under with floating + autoShow in the (quite complex) combination of my app. This all seem to work properly now - in a much cleaner way !
Consider this as closed
Cheers, C.

[Daniil]

// Do not use default Panel dragging: use window type dragging
initDraggable: Ext.window.Window.prototype.initDraggable

I guess it can be replaced with

simpleDrag: true

http://docs.sencha.com/extjs/4.2.0/#...cfg-simpleDrag

Probably, it appeared due to this discussion.