panel drag and drop is not working in extjs 4.1

This code is working in Extjs 4.0.2a but when converted to 4.1 it no longer works and gives an error

Uncaught TypeError: Cannot call method 'query' of undefined

Ext.onReady(function() {

    var panel = new Ext.Panel({
        renderTo: divtag,
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getLeft(true);
                this.y = el.getTop(true);
            },
            endDrag: function(e) {
                this.panel.setPosition(this.x, this.y);
            }
        },
        title: 'Panel',
        width: 200,
        height: 100,
        x: 20,
        y: 20
    });
});

Answers


Apparently there is a bug in this version of Ext. It wont work even if you try default D'n'D for panel like this:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: true,
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

I menage to patch the code to work the way you want it, this code should work:

Ext.onReady(function() {
    var panel = new Ext.Panel({
        renderTo: 'divtag',
        draggable: {
            insertProxy: false,
            onDrag: function(e) {
                var el = this.proxy.getEl();
                this.x = el.getX();
                this.y = el.getY();
            },
            endDrag: function(e) {
                panel.setPosition(this.x,this.y);
            },
            alignElWithMouse: function() {
                panel.dd.superclass.superclass.alignElWithMouse.apply(panel.dd, arguments);
                this.proxy.sync();
            }
        },
        title: 'Panel',
        width: 200,
        height:100,
        x: 20,
        y: 20
    }); //panel.show(); });
});

As a side note I should probably advice you not to do this anyway, because you can define your own DD for panel that you can use, and even better Ext already have one defined, so you can just override Ext panel to use default Ext.util.ComponentDragger, or in code, I advice you to do this:

Ext.override(Ext.panel.Panel, {
    initDraggable: function() {
        var me = this,
            ddConfig;

        if (!me.header) {
            me.updateHeader(true);
        }

        if (me.header) {
            ddConfig = Ext.applyIf({
                el: me.el,
                delegate: '#' + me.header.id
            }, me.draggable);

            // Add extra configs if Window is specified to be constrained
            if (me.constrain || me.constrainHeader) {
                ddConfig.constrain = me.constrain;
                ddConfig.constrainDelegate = me.constrainHeader;
                ddConfig.constrainTo = me.constrainTo || me.container;
            }

            me.dd = Ext.create('Ext.util.ComponentDragger', this, ddConfig);
            me.relayEvents(me.dd, ['dragstart', 'drag', 'dragend']);
        }
    }
});
var panel = Ext.create('Ext.panel.Panel', {
    id: 'test',
    renderTo: 'divtag',
    draggable: true,
    floating: true,
    title: 'Panel',
    width: 200,
    height:100,
    x: 20,
    y: 20
});

Code for a initDraggable function in panel override is taken from current stable version of Ext.window.Window.initDraggable method.


I was able to get it working in 4.1: you have to add quotes around the id of the renderTo element, like:

renderTo : 'divtag',

Without quotes it was looking for an undefined variable named divtag.

Once I ran that I got no errors, and then I just did panel.show() to render it.


Just a suggestion: a Window component is a specialized Panel that has a floating mixin - might be all you need.


Need Your Help

Why does this prime checker work, and not work if I try to make it more efficient

java primes math.sqrt

Below is one of the first programs I made (with help from the Internet) in Java. It is a program that checks if a given integer is prime or not and prompts the user with feedback. If the user input...

Two dimensional grid graph implementation

c algorithm grid 2d graph-algorithm

I want to implement two dimensional grid graph in C. Is it better to start with a single node and continue adding nodes when it is required or forming it one at a time? Code snippet would be great.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.