面板拖放在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

未捕获TypeError：无法调用方法'query'未定义

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

我的代码修补程序按照你想要的方式工作，这段代码应该可以工作： p>

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屋！