Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2008
    Location
    Berlin
    Posts
    25
    Vote Rating
    0
    madmaxmatze is on a distinguished road

      0  

    Default [CLOSED]Drag and Drop problem within complex layout

    [CLOSED]Drag and Drop problem within complex layout


    I did the following:

    - used complex layout from:
    http://dev.sencha.com/deploy/ext-4.0...t/complex.html
    - added id "tab1_panel" to the first tab in the center.
    - added a window at the end of the Ext.onReady function
    Code:
           var testWin = new Ext.Window({
    	   	    title: 'Test',
    	   	    width: 100,
    	   	    height: 100,
    	   	    renderTo:  Ext.get('tab1_panel'),
    	   	    constraint: true
    	   	});
    	   	testWin.show();
    When I now try to move around the window, it jumps (exactly by the offset of the tab panel) when dropping it. The same happens with other Components like the SVG-Tiger when renderedTo the panel.

    Testet with IE9, Firefox4 and Chrome11 + Ext.js 4

    Is this a bug or I am just missing something?

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Location
    Berlin
    Posts
    25
    Vote Rating
    0
    madmaxmatze is on a distinguished road

      0  

    Default Live test case...

    Live test case...


    To test this issue, please visit: http://old.madmaxmatze.de/complex_test.html

    Within the source I clearly marked all changes I made. I would really appreciate any help on this!!!

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,937
    Vote Rating
    635
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    This is the "old" way of doing it:

    Code:
    Ext.getCmp('tab1_panel').add({
        xtype: 'window',
        title: 'Test',
        width: 100,
        height: 100,
        constrain: true
    }).show();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha User
    Join Date
    Mar 2008
    Location
    Berlin
    Posts
    25
    Vote Rating
    0
    madmaxmatze is on a distinguished road

      0  

    Default


    Using the "old" way of creating elements solved my problem 100% - with windows, drawComponents, etc. So it seems the renderTo attribute is not working very well or has to be used in a different way.

  5. #5
    Sencha User
    Join Date
    Aug 2010
    Posts
    5
    Vote Rating
    1
    Al Jey is on a distinguished road

      0  

    Default


    Quote Originally Posted by evant View Post
    This is the "old" way of doing it:

    Code:
    Ext.getCmp('tab1_panel').add({
        xtype: 'window',
        title: 'Test',
        width: 100,
        height: 100,
        constrain: true
    }).show();
    This your "new way of doing it" really makes no sense if I, for example, want to DEFINE a default window rendered to some panel, like:

    Code:
    Ext.define('My.view.Window',{
    	extend:'Ext.window.Window',
    	initComponent:function(){
    		Ext.apply(this,{
    			renderTo:'panelId',
    			closeAction:'hide',
    			constrainHeader:true
    		});
    		this.callParent(arguments)
    	}
    });
    In this case I still have to use renderTo. Panel with id 'panelId' is located at a distance of 30px from the top and this window is always snapped downwards by exactly these 30px after being dragged.

    For anyone who is looking for at least some way of fixing this, here's what worked for me (taking in account those 30px):

    Code:
    Ext.define('My.view.Window',{
    	extend:'Ext.window.Window',
    	initComponent:function(){
    		Ext.apply(this,{
    			renderTo:'panelId',
    			closeAction:'hide',
    			constrainHeader:true
    		});
    		this.callParent(arguments);
    		var fit=function(comp){
    			var pos=comp.getPosition();
    			comp.suspendEvents();
    			comp.setPosition(pos[0],pos[1]);
    			comp.resumeEvents()
    		};
    		this.on('maximize',fit,this);
    		this.on('restore',fit,this);
    		this.on('move',function(comp,x,y){
    			comp.suspendEvents();
    			comp.setPosition(x,y-30);
    			comp.resumeEvents()
    		},this)
    	}
    });
    Now this isn't exactly a "clean" solution but it works ('maximize' and 'restore' events internally fire the 'move' event so those need to be implemented too).

  6. #6
    Sencha User
    Join Date
    Apr 2011
    Posts
    2
    Vote Rating
    0
    magicdevel is on a distinguished road

      0  

    Default


    Another way to fix the bug, it's to apply following patch:
    Code:
    Ext.panel.Panel.override({
        unghost: function(show, matchPosition) {
            var me = this;
            if (!me.ghostPanel) {
                return;
            }
            if (show !== false) {
                me.el.show();
                if (matchPosition !== false) {
                    var basePos = Ext.fly(this.renderTo || Ext.getBody()).getXY();
                    var gp = me.ghostPanel.getPosition();
                    me.setPosition(gp[0] - basePos[0], gp[1] - basePos[1]);
                }
                if (me.floatingItems) {
                    me.floatingItems.show();
                }
                Ext.defer(me.focus, 10, me);
            }
            me.ghostPanel.el.hide();
        }
    });

  7. #7
    Sencha User
    Join Date
    Aug 2010
    Posts
    5
    Vote Rating
    1
    Al Jey is on a distinguished road

      0  

    Default


    Quote Originally Posted by magicdevel View Post
    Another way to fix the bug, it's to apply following patch:
    Code:
    Ext.panel.Panel.override({
        unghost: function(show, matchPosition) {
            var me = this;
            if (!me.ghostPanel) {
                return;
            }
            if (show !== false) {
                me.el.show();
                if (matchPosition !== false) {
                    var basePos = Ext.fly(this.renderTo || Ext.getBody()).getXY();
                    var gp = me.ghostPanel.getPosition();
                    me.setPosition(gp[0] - basePos[0], gp[1] - basePos[1]);
                }
                if (me.floatingItems) {
                    me.floatingItems.show();
                }
                Ext.defer(me.focus, 10, me);
            }
            me.ghostPanel.el.hide();
        }
    });
    :-) this is awesome (works perfectly), thanks, haven't been able to find this anywhere
    did you come up with this yourself?

  8. #8
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    65
    Vote Rating
    1
    kevhender is on a distinguished road

      0  

    Default


    This issue appears to be back now, with 4.1-beta.

    This override seems to work, for now...

    Code:
    Ext.Component.override({
                setPagePosition: function(x, y, animate) {
                    var me = this,
                        p,
                        floatParentBox;
    
    
                    if (Ext.isArray(x)) {
                        y = x[1];
                        x = x[0];
                    }
                    me.pageX = x;
                    me.pageY = y;
    
    
                    if (me.isContainedFloater()) {
    
    
                        // Floating Components which are registered with a Container have to have their x and y properties made relative
                        if (me.isContainedFloater()) {
                            floatParentBox = me.floatParent.getTargetEl().getViewRegion();
                            if (Ext.isNumber(x) && Ext.isNumber(floatParentBox.left)) {
                                x -= floatParentBox.left;
                            }
                            if (Ext.isNumber(y) && Ext.isNumber(floatParentBox.top)) {
                                y -= floatParentBox.top;
                            }
                        }
                        me.setPosition(x, y, animate);
                    } else {
                        p = me.el.translatePoints(x, y);
                        me.setPosition(p.left, p.top, animate);
                    }
    
    
                    return me;
                }
            });

Similar Threads

  1. Drag & Drop issue between 2 region of a complex layout
    By paquerette in forum Ext 2.x: Help & Discussion
    Replies: 21
    Last Post: 10 May 2009, 5:57 AM
  2. Complex table drag and drop
    By suaveant in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 6 Aug 2008, 1:05 PM
  3. Drag and Drop of Divs el in a Complex Layout Questions
    By Janachi in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 19 Jun 2008, 8:18 AM
  4. Complex Drag n Drop problem
    By mpatel in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 18 Jan 2008, 11:15 AM

Thread Participants: 4

Tags for this Thread