面板拖放在 extjs 4.1 中不起作用 [英] panel drag and drop is not working in extjs 4.1

问题描述

此代码适用于 Extjs 4.0.2a但是当转换为 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

未捕获的类型错误:无法调用未定义的方法查询"

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

推荐答案

显然这个版本的 Ext.即使您为这样的面板尝试默认 D'n'D，它也不会工作:

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

作为旁注，我应该建议您无论如何不要这样做，因为您可以为可以使用的面板定义自己的 DD，甚至更好的 Ext 已经定义了一个，因此您可以覆盖 Ext 面板以使用默认 Ext.util.ComponentDragger，或者在代码中，我建议你这样做:

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

面板覆盖中 initDraggable 函数的代码取自 Ext.window.Window.initDraggable 方法.

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

这篇关于面板拖放在 extjs 4.1 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！