[CLOSED]Drag and Drop problem within complex layout

[madmaxmatze]

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

       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?

[madmaxmatze]

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!!!

[evant]

This is the "old" way of doing it:

Ext.getCmp('tab1_panel').add({
    xtype: 'window',
    title: 'Test',
    width: 100,
    height: 100,
    constrain: true
}).show();

[madmaxmatze]

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.

[Al Jey]

This is the "old" way of doing it:

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:

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

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

[magicdevel]

Another way to fix the bug, it's to apply following patch:

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();
    }
});

[Al Jey]

Another way to fix the bug, it's to apply following patch:

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?

[kevhender]

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

This override seems to work, for now...

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;
            }
        });