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
    223
    Vote Rating
    29
    christophe.geiser has a spectacular aura about christophe.geiser has a spectacular aura about

      0  

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

    [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
    223
    Vote Rating
    29
    christophe.geiser has a spectacular aura about christophe.geiser has a spectacular aura about

      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,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      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
    223
    Vote Rating
    29
    christophe.geiser has a spectacular aura about christophe.geiser has a spectacular aura about

      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
    977
    Vote Rating
    113
    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.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 2