Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Nov 2008
    Location
    Lyon, France
    Posts
    229
    Vote Rating
    48
    christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough

      0  

    Default [4.2.0.489] position problem: floating with constrainTo / renderTo

    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.


    Code:
    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

  2. #2
    Sencha User
    Join Date
    Nov 2008
    Location
    Lyon, France
    Posts
    229
    Vote Rating
    48
    christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough

      0  

    Default

    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 ):

    Code:
    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.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,570
    Vote Rating
    53
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    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.

    Code:
    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()

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Location
    Lyon, France
    Posts
    229
    Vote Rating
    48
    christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough christophe.geiser is a jewel in the rough

      0  

    Default

    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.

  5. #5
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    993
    Vote Rating
    119
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default

    Code:
    // Do not use default Panel dragging: use window type dragging
    initDraggable: Ext.window.Window.prototype.initDraggable
    I guess it can be replaced with
    Code:
    simpleDrag: true
    http://docs.sencha.com/extjs/4.2.0/#...cfg-simpleDrag

    Probably, it appeared due to this discussion.
    Object.NET
    Frameworks and Tools for .NET Developers
    --------------------------------------------------
    Ext.NET - Ext JS for ASP.NET - Examples | Twitter
    Bridge.NET - Write C#. Run JavaScript! - Live | Twitter
    --------------------------------------------------

Thread Participants: 2