You found a bug! We've classified it as EXTJS-6737 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
    naggy is on a distinguished road

      0  

    Default Grid Drag n Drop with Scrolling

    Grid Drag n Drop with Scrolling


    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

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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,677
    Vote Rating
    749
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I would say it is a bug. Increase the panel to 800 width and it works no issues but not working in your example.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2011
    Posts
    34
    Vote Rating
    0
    naggy is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar