Search code examples
extjsdrag-and-dropextjs4

ExtJs drag and drop menuitems from panel to panel

I've defined DragZone as:

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

Where menus are menuitems from panel: 

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'
            }

Dragging is working but I have problems with displaying dragging items, it look like it has been croped: enter image description here

But if I'll change dragsource from menuitem to menu itself:

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

displaying works ok:

enter image description here

How could I fix this?

Solution

  • component.DragZone.resizeFrame= true;