Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default RowNumberer and Drag Drop

    RowNumberer and Drag Drop


    REQUIRED INFORMATION Ext version tested:
    • Ext 4.0 rev 2
    Browser versions tested against:
    • any
    Description: Steps to reproduce the problem:
    • create 2 grids with DD and a rowNumberer column
    • drop an item.
    The result that was expected:
    • Row numbers getting updated on drop
    The result that occurs instead:
    • repeated number appear instead of reindexing
    Test Case: Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • any

  2. #2
    Sencha - Services Team
    Join Date
    Aug 2007
    Posts
    98
    Vote Rating
    0
    mdlincoln is on a distinguished road

      0  

    Default


    Please provide a test case that demonstrates the issue and we will do our best to investigate it.

  3. #3
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Ok the problem seems to be realted to the copy:true option in one of the grids

    This is the dbd_grid_to_grid.js code toked from the examples and modified to reproduce the error:

    Code:
    /*
    
    This file is part of Ext JS 4
    
    Copyright (c) 2011 Sencha Inc
    
    Contact:  http://www.sencha.com/contact
    
    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
    
    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
    
    */
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.dd.*'
    ]);
    
    Ext.define('DataObject', {
        extend: 'Ext.data.Model',
        fields: ['name', 'column1', 'column2']
    });
    
    Ext.onReady(function(){
    
        var myData = [
            { name : "Rec 0", column1 : "0", column2 : "0" },
            { name : "Rec 1", column1 : "1", column2 : "1" },
            { name : "Rec 2", column1 : "2", column2 : "2" },
            { name : "Rec 3", column1 : "3", column2 : "3" },
            { name : "Rec 4", column1 : "4", column2 : "4" },
            { name : "Rec 5", column1 : "5", column2 : "5" },
            { name : "Rec 6", column1 : "6", column2 : "6" },
            { name : "Rec 7", column1 : "7", column2 : "7" },
            { name : "Rec 8", column1 : "8", column2 : "8" },
            { name : "Rec 9", column1 : "9", column2 : "9" }
        ];
    
        // create the data store
        var firstGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject',
            data: myData
        });
    
    
        // Column Model shortcut array
        var columns = [
            Ext.create('Ext.grid.RowNumberer'),
            {text: "Record Name", flex: 1, sortable: true, dataIndex: 'name'},
            {text: "column1", width: 70, sortable: true, dataIndex: 'column1'},
            {text: "column2", width: 70, sortable: true, dataIndex: 'column2'}
        ];
    
        // declare the source Grid
        var firstGrid = Ext.create('Ext.grid.Panel', {
            multiSelect: true,
            viewConfig: {
                copy:true,
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'firstGridDDGroup',
                    dropGroup: 'secondGridDDGroup'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                        Ext.example.msg("Drag from right to left", 'Dropped ' + data.records[0].get('name') + dropOn);
                    }
                }
            },
            store            : firstGridStore,
            columns          : columns,
            stripeRows       : true,
            title            : 'First Grid',
            margins          : '0 2 0 0'
        });
    
        var secondGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject'
        });
    
        // create the destination Grid
        var secondGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'secondGridDDGroup',
                    dropGroup: 'firstGridDDGroup'
                },
                listeners: {
                    drop: function(node, data, dropRec, dropPosition) {
                        var dropOn = dropRec ? ' ' + dropPosition + ' ' + dropRec.get('name') : ' on empty view';
                        Ext.example.msg("Drag from left to right", 'Dropped ' + data.records[0].get('name') + dropOn);
                    }
                }
            },
            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(){
                        //refresh source grid
                        firstGridStore.loadData(myData);
    
                        //purge destination grid
                        secondGridStore.removeAll();
                    }
                }]
            }
        });
    });

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,046
    Vote Rating
    657
    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


    I wouldn't really classify this as a bug. The RowNumberer works by attaching a renderer to that column. This means that for the numbering to be correct all rows in the active view would need to be redrawn.

    As a consequence, this means the row numberer would need to listen to various events and could possibly trigger the view to refresh prematurely. In this case it is better for you to manually refresh the grid view when your operation has completed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Hi evan, thanks for the reply, now, how do i refresh the grid when dd (may be a noob question) but mygrid.getView().refresh() didn't do the trick.

    Thanks in advance.
    Juan

  6. #6
    Sencha User juanb's Avatar
    Join Date
    Jun 2011
    Location
    usa
    Posts
    42
    Vote Rating
    1
    juanb is on a distinguished road

      0  

    Default


    Evan some more info, this unexpected behaviour only happens with data loaded thru proxy, if the data was directly added to the store via 'data' propertry then the rownumberer works as expected
    I provide you this aditional example:
    I modified the xml-grid.js to have a rowNumberer and a store with id (wich i could fetch thru Ext.getStore
    Code:
    /*
    
    This file is part of Ext JS 4
    
    Copyright (c) 2011 Sencha Inc
    
    Contact:  http://www.sencha.com/contact
    
    GNU General Public License Usage
    This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
    
    If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
    
    */
    Ext.require([
        'Ext.data.*',
        'Ext.grid.*'
    ]);
    
    Ext.onReady(function(){
        Ext.define('Book',{
            extend: 'Ext.data.Model',
            fields: [
                // set up the fields mapping into the xml doc
                // The first needs mapping, the others are very basic
                {name: 'Author', mapping: 'ItemAttributes > Author'},
                'Title', 'Manufacturer', 'ProductGroup'
            ]
        });
    
        // create the Data Store
        var store = Ext.create('Ext.data.Store', {
            id:'store1',
            model: 'Book',
            autoLoad: true,
            proxy: {
                // load using HTTP
                type: 'ajax',
                url: 'sheldon.xml',
                // the return will be XML, so lets set up a reader
                reader: {
                    type: 'xml',
                    // records will have an "Item" tag
                    record: 'Item',
                    idProperty: 'ASIN',
                    totalRecords: '@total'
                }
            }
        });
    
        // create the grid
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
                 Ext.create('Ext.grid.RowNumberer'),
                {text: "Author", flex: 1, dataIndex: 'Author', sortable: true},
                {text: "Title", width: 180, dataIndex: 'Title', sortable: true},
                {text: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
                {text: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
            ],
            renderTo:'example-grid',
            width: 540
            
        });
    });
    then in the console:
    Ext.getStore('store1').insert(2,{ Author : "RRRRRR", Title : "AAAAAAAAa"})

    voilá!

    Screenshot-XML Grid Example - Mozilla Firefox.jpg
    I was reading the rowNumberer source and I don't understand why you return:
    Code:
    return store.indexOfTotal(record) + 1;
    instead of:
    Code:
    return rowIdx+ 1;
    if I modify RowNumerer with the line above it works every time

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Location
    Russia
    Posts
    34
    Vote Rating
    1
    icemanovich is on a distinguished road

      1  

    Default


    In my case this way help:
    Code:
    yourGrid.columns[0].doSort();
    This will update numbers in RowNumberer.

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    3
    Vote Rating
    0
    linkinpark is on a distinguished road

      0  

    Default


    icemanovich helped me ,thanks.