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,927
    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,927
    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,927
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi