You found a bug! We've classified it as EXTJS-7022 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    20
    Vote Rating
    0
    marcel.urbanek is on a distinguished road

      0  

    Default Problems when dragging invisible rows from a infinite grid

    Problems when dragging invisible rows from a infinite grid


    Hi,
    I have discovered a problem when using drag and drop in the infinite grid mode.

    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1.1 Build date: 2012-07-04 21:23:42
    Browser versions tested against:
    • Google Chrome 20.0.1132.57 m
    Description:
    • When selecting some items in an infinite grid that aren't visible and droping them in another grid, the items are droped in the grid but not all of them are removed in the drag grid.
    Steps to reproduce the problem:
    • Use infinite scrolling (buffered: true, pageSize: 100) and select some rows. Scroll down so some of them aren't visible. Drag and Drop them to the other grid.
    The result that was expected:
    • All drag ' n droped entries should be removed in the first grid.
    The result that occurs instead:
    • Some of the entries remain in the first grid. Following error is displayed when trying to dragn ' drop them again:
    Uncaught TypeError: Cannot read property 'internalId' of undefined


    I changed the dnd_grid_to_grid example a little to illustrate the problem:
    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.dd.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller'
    ]);
    
    
    Ext.onReady(function(){
    
    
        Ext.define('ForumThread', {
            extend: 'Ext.data.Model',
            fields: [
                'title', 'forumtitle', 'forumid', 'username', {
                    name: 'replycount',
                    type: 'int'
                }, {
                    name: 'lastpost',
                    mapping: 'lastpost',
                    type: 'date',
                    dateFormat: 'timestamp'
                },
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
        
        // create the data store
        var firstGridStore = Ext.create('Ext.data.Store', {
            id: 'store',
            model: 'ForumThread',
            remoteSort: true,
            // allow the grid to interact with the paging scroller by buffering
            buffered: true,
            pageSize: 100,
            proxy: {
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/remote_topics/index.php',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                // sends single sort as multi parameter
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }],
            autoLoad: true
        });
    
    
    
    
        // Column Model shortcut array
        var columns = [{
                tdCls: 'x-grid-cell-topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'username',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                align: 'center',
                width: 70,
                sortable: false
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 130,
                renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
                sortable: true
            }];
    
    
        // declare the source Grid
        var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect: true,
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'firstGridDDGroup',
                    dropGroup: 'secondGridDDGroup'
                }
            },
            store            : firstGridStore,
            columns          : columns,
            stripeRows       : true,
            title            : 'First Grid',
            margins          : '0 2 0 0'
        });
    
    
        var secondGridStore = Ext.create('Ext.data.Store', {
            model: 'ForumThread'
        });
    
    
        // create the destination Grid
        var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'secondGridDDGroup',
                    dropGroup: 'firstGridDDGroup'
                }
            },
            
            store            : secondGridStore,
            columns          : columns,
            stripeRows       : true,
            title            : 'Second Grid',
            margins          : '0 0 0 3'
        });
    
    
        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            width        : 650,
            height       : 300,
            layout       : {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            renderTo     : 'panel',
            defaults     : { flex : 1 }, //auto stretch
            items        : [
                firstGrid,
                secondGrid
            ],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['->', // Fill
                {
                    text: 'Reset both grids',
                    handler: function(){
    
    
                        //purge destination grid
                        secondGridStore.removeAll();
                    }
                }]
            }
        });
    });
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,112
    Vote Rating
    504
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    There is a bug, but it's not really the one you reported.

    The problem with the current code is that it throws an exception because you're trying to add duplicate records to the second grid, this is to be expected.

    However, when you remove a record from the old grid, it needs to invalidate the page cache so that when we come back, the store knows it needs to re-request the data from the source.

    In this case, the "removed" record will always be visible, because after the cache is invalidated, the record will still exist on the server because the data set is read only, so it's up to the developer to ensure they stay in sync.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    20
    Vote Rating
    0
    marcel.urbanek is on a distinguished road

      0  

    Default


    Thanks for your answer. I used the read-only dataset just to quickly illustrate the problem. In my real-world scenario I update the server side record set so the bugfix you are planning should work for me.

Thread Participants: 1

Tags for this Thread

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