Grid Drag n Drop with Scrolling

[naggy]

Hi,

Relates to ExtJS Version 4.1.

If you place two grids with DnD enabled on a panel which's width is less than the two grids' width, the panel needs to be scrollable.

You may achieve scrolling during DnD by registering the panel's targetEl with the ScrollManager, which works pretty good.

The only problem is that the respective DropZone seems not to be scrolled with the panel content (the 2 grids). That means that eventhough the target panel gets visible after the scroll, the respective DropZone still sits outside of the panel (the 2 green arrows appear only when the mouse is outside of the panel, see attached code).

Is it a bug?

Regards,
Markus

Ext.onReady(function(){
    var bd = Ext.getBody();


    var myData = [
        ['44', '33445', '10', '11.07.2011', 'Geliefert'],
        ['55', '33445', '20', '12.07.2011', 'Störung'],
        ['66', '33445', '30', '13.07.2011', 'Verspätet']
    ];


    var ds = Ext.create('Ext.data.ArrayStore', {
        autoLoad: true,
        fields: [
          {name: 'orderno'},
          {name: 'itemno'},
          {name: 'quantity'},
          {name: 'deliverydate', type: 'date', dateFormat: 'd.m.Y'},
          {name: 'status'}
        ],
        data: myData
    });
    
    var ds2 = Ext.create('Ext.data.ArrayStore', {
        autoLoad: true,
        fields: [
          {name: 'orderno'},
          {name: 'itemno'},
          {name: 'quantity'},
          {name: 'deliverydate', type: 'date', dateFormat: 'd.m.Y'},
          {name: 'status'}
        ]
    });


    var top = Ext.create('Ext.panel.Panel', {
        frame: true,
        title: 'Test',
        renderTo: bd,
        bodyStyle:'padding:5px 5px 0',
        width: 500,
        layout: 'hbox',
        autoScroll: true,
        items: [
        {
            xtype:     'gridpanel',
            width: 500,
            store:     ds,
            height: 150,
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragText: 'Drag and drop to reorganize'
                }
            },
            columns: [{
                   header: 'orderno',
                  width: 150,
                   dataIndex: 'orderno'
            }]
        },
        {
            xtype:     'gridpanel',
            width: 500,
            store:     ds2,
            height: 150,
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragText: 'Drag and drop to reorganize'
                }
            },
            columns: [{
                   header: 'status',
                  width: 150,
                   dataIndex: 'status'
            }]
        }
        ]
    });
    
    var el = top.getTargetEl();


    el.ddScrollConfig = {
        animDuration: 0.2,
        animate: true,
        vthresh: -1,
        hthresh: 100,
        frequency: 300,
        increment: 400,
        ddGroup: "GridDD"
    };
    
    Ext.dd.ScrollManager.register(el);
    var x = 1;
    
});

[mitchellsimoens]

I would say it is a bug. Increase the panel to 800 width and it works no issues but not working in your example.

[naggy]

Thanks for the feedback.

I know that increasing the surrounding panel would eliminate the problem.
In my example, I limited the width just do demonstrate the problem.

In my real use case, I need to use many grids, though, each of them using DnD.
Due to the limited width of the screen, scrolling would be essential.

Is there any workaround? Should I create a JIRA issue?

Regards,
Markus