1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    37
    Answers
    2
    Vote Rating
    1
    Srikanth474 is on a distinguished road

      0  

    Default Answered: Grid Drag and Drop

    Answered: Grid Drag and Drop


    Hi,

    I am trying to implement the Grid Drag and Drop functionality as per the below example.

    http://docs.sencha.com/ext-js/4-0/#!...d_to_grid.html

    Example works, but i have to drag and drop in between 4 grids, i have to drag from one grid and drop in any of the other 3 grids.
    Is that even possible?
    i tried to do some trial and errors but not successful. if i drop in one grid it is adding the record to all the grids.

    Thanks
    srikanth

  2. Do you have a unique store for each grid? The drop simple updates the underlying store.

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Do you have a unique store for each grid? The drop simple updates the underlying store.

    Scott.

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    37
    Answers
    2
    Vote Rating
    1
    Srikanth474 is on a distinguished road

      0  

    Default


    Yes, i have unique stores for all the grids and they have unique storeId's. and all the stores are having a common model

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Here is the example in mention with 3 grids:

    Code:
    // GRID; DRAG; DROP; MULTIGRID; 
    
    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 = [
            {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: {
                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'
        });
    
        var thirdGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject'
        });
    
        // create the destination Grid
        var thirdGrid = Ext.create('Ext.grid.Panel', {
            viewConfig: {
                plugins: {
                    ptype: 'gridviewdragdrop',
                    dragGroup: 'thirdGridDDGroup',
                    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            : thirdGridStore,
            columns          : columns,
            stripeRows       : true,
            title            : 'third Grid',
            margins          : '0 0 0 3'
        });
    
        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            width        : 850,
            height       : 300,
            layout       : {
                type: 'hbox',
                align: 'stretch',
                padding: 5
            },
            renderTo     : Ext.getBody(),
            defaults     : { flex : 1 }, //auto stretch
            items        : [
                firstGrid,
                secondGrid,
                thirdGrid
            ],
            dockedItems: {
                xtype: 'toolbar',
                dock: 'bottom',
                items: ['->', // Fill
                {
                    text: 'Reset both grids',
                    handler: function(){
                        //refresh source grid
                        firstGridStore.loadData(myData);
    
                        //purge destination grid
                        secondGridStore.removeAll();
    
                        //purge destination grid
                        thirdGridStore.removeAll();
                    }
                }]
            }
        });
    });
    Scott.

  6. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    37
    Answers
    2
    Vote Rating
    1
    Srikanth474 is on a distinguished road

      0  

    Default


    its working for me, the issue was with the mix up with id's

  7. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Answers
    656
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    mix up with id's
    A good reason (lesson) for not using id's .. use itemId instead.

    Scott.

Thread Participants: 1

Tags for this Thread