ExtJs将菜单项从面板拖放到面板

Question

我已将DragZone定义为：

    var menuItems = panel.query('.menuitem');
    Ext.each(menuItems, function (component) {
        component.DragZone = Ext.create('Ext.dd.DragZone', component.getEl(), {
            getDragData: function (e) {
                var compEl = component.getEl(),
                cloneEl;

                cloneEl = compEl.dom.cloneNode(true);
                cloneEl.id = Ext.id();

                return {
                    ddel: cloneEl,
                    repairXY: Ext.fly(e.getTarget()).getXY(),
                    componentClone: component.cloneConfig()
                };
            },
            getRepairXY: function () {
                return this.dragData.repairXY;
            },
            ddGroup: 'auGroup'
        });
    });

菜单是面板中的菜单项：

xtype: 'panel',
title: 'Geometry Controls',
items: [
    {
        xtype: 'menu',
        floating: false,
        itemId: 'geometryControlsMenu',
        defaults: {
            height: 20
        },
        items: [
            {
                xtype: 'menuitem',
                itemId: 'angles',
                text: 'Angles',
                iconCls: 'icon-apgo'
            },
            {
                xtype: 'menuitem',
                itemId: 'coordinatePlane',
                text: 'Coordinate Plane',
                iconCls: 'icon-apgo'
            }

拖动工作正常但我在显示拖动项目方面遇到问题，看起来它已经被弄坏了：

但如果我将dragsource从menuitem更改为菜单本身：

var menuItems = panel.query('.menu');

显示效果正常：

我该如何解决这个问题？

Answer 1

component.DragZone.resizeFrame = true;