Results 1 to 4 of 4

Thread: Problems when dragging invisible rows from a infinite grid

    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

    Default Problems when dragging invisible rows from a infinite grid

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


    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
    • 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:
        Ext.define('ForumThread', {
            extend: '',
            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('', {
            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: '',
                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('', {
            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        : [
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['->', // Fill
                    text: 'Reset both grids',
                    handler: function(){
                        //purge destination grid
    Attached Images Attached Images

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Sydney, Australia


    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.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2012


    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.

  4. #4
    Ext JS Premium Member
    Join Date
    Feb 2009


    Was this ever fixed or patched in 4.1.1? We have this issue (discovered 24 hours from a major release as luck would have it!).

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts