1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default Drag and drop rows to column

    Drag and drop rows to column


    Hi,

    I am new to Ext JS, I have tried 'drag and drop' and it is working fine when i drag rows. What I am trying now is dragging a row (a field from MySQL) from left grid and dropping it on right grid that gives data from database table as a column.

    The code I am using now is,

    Code:
    Ext.require([
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.dd.*'
    ]);
    
    Ext.define('DataObject', {
        extend: 'Ext.data.Model',
        fields: ['Field']
    });
    
    Ext.onReady(function(){
       
            var firstGridStore = Ext.create('Ext.data.Store', {
            model: 'DataObject',
            
                autoLoad: true,
                pageSize: 4,
                proxy: {
                    type: 'ajax',
                    url : 'user.php',
                    reader: {
                    type: 'json',
                    root: 'users'            
                }
            }
        });
    
        // Column Model shortcut array
        var columns = [
            {text: "Fields", sortable: true, width: 50, dataIndex: 'Field'}
        ];
    
        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'
        });
    
        //Simple 'border layout' panel to house both grids
        var displayPanel = Ext.create('Ext.Panel', {
            layout: 'fit',
            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();
                    }
                }]
            }
        });
    });
    I am attaching a screenshot, the field from left grid should be title for data (from database) on the right grid for my requirement.

    dragdrop.jpg

    Can someone help me out?

    Thanks.

  2. #2
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    No one?

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    More info:

    Left grid will have grid data like:
    Fields
    id
    name
    data

    After dragging data from left grid, right grid should have data like:
    id name
    1 test1
    2 test2
    3 test3

    Note: Here only id and name are dragged.

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Location
    California
    Posts
    12
    Vote Rating
    1
    panshr is on a distinguished road

      0  

    Default


    it should have same column name in store in both side.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    Finally there is a reply, thanks panshr.

    That is what is my requirement, I don't want it to be same. I want the column headers to be dynamic according to the drag from left grid. I think you understood the post where I mentioned "More info".

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    107
    Vote Rating
    -1
    sencha.user is an unknown quantity at this point

      0  

    Default


    No idea?

  7. #7
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    msmeeks is on a distinguished road

      0  

    Default


    The name of your post is misleading. I thought you were trying to drag a row from one grid and drop it on a column in another grid, which is what I have just figured out how to do. More on that later in case others stumble on this post looking for that.

    What I believe you are actually trying to do is to drag a row from one grid to a second grid (which is well documented in the examples) and then add a column to the second grid. If that is, in fact, the case, then you should look at this post.

  8. #8
    Sencha User
    Join Date
    Sep 2012
    Posts
    6
    Vote Rating
    0
    msmeeks is on a distinguished road

      0  

    Default Drag and Drop a row from one grid to a column in another grid

    Drag and Drop a row from one grid to a column in another grid


    The following is basically a re-working of the code from the Drag and Drop a Field to a Cell example.

    Plugin
    Code:
    // Adapted from http://dev.sencha.com/deploy/ext-3.4.0/examples/dd/field-to-grid-dd.js
    Ext.namespace('Ext.ux.dd');
    
    /*!
     * Ext JS Library 3.4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    // A DropZone which allows things to be dropped onto a grid.
    // This is not necessary by itself, bu serves as a base for
    // CellDropZone and ColumnDropZone.
    Ext.ux.dd.ColumnDropZone = Ext.extend(Ext.dd.DropZone, {
        constructor : function(config) {
            if (config)
                Ext.apply(this, config);
        },
    
    
        // Call the DropZone constructor using the grid's element
        // only after the grid has been rendered.
        init: function(grid) {
            if (grid.rendered) {
                this.grid = grid;
                this.view = grid.getView();
                this.store = grid.getStore();
                this.ddGroup = this.ddGroup || grid.ddGroup || 'GridDD';
                Ext.ux.dd.ColumnDropZone.superclass.constructor.call(this, this.grid.getEl());
            } else {
                grid.on('render', this.init, this);
            }
        },
    
    
        // Scroll the main configured Element when we drag close to the edge
        containerScroll: true,
    
    
        // Whether or not to highlight the target if it is invalid.
        showActiveOnInvalid: false,
    
        getTargetFromEvent: function(e) {
            // Ascertain whether the mousemove is within a grid cell
            var cell = e.getTarget(this.view.cellSelector);
            if (cell) {
                // We *are* within a grid cell/header, so ask the View exactly which one,
                // Extract data from the Model to create a target object for
                // processing in subsequent onNodeXXXX methods. Note that the target does
                // not have to be a DOM element. It can be whatever the noNodeXXX methods are
                // programmed to expect.
                var columnIndex = this.view.findCellIndex(cell);
                if (columnIndex !== false) {
                    return {
                        node: cell,
                        columnIndex: columnIndex,
                        column: this.grid.getColumnModel().getColumnAt(columnIndex)
                    };  
                }   
            }   
        },  
    
        // On Node enter, see if it is valid for us to drop the field on that type of column.
        onNodeEnter: function(target, dd, e, dragData) {
            this.dropOK = false;
            if (!target) {
                return;
            }   
    
            if (this.dropIsValid) {
                this.dropOK = this.dropIsValid(target, dd, e, dragData);
            } else {
                this.dropOK = true;
            }   
            if (this.dropOK || this.showActiveOnInvalid) {
                this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
                    el.addClass('x-drop-target-active');
                }); 
            }   
        },  
    
        // Unhighlight the target node.
        onNodeOut: function(target, dd, e, dragData) {
            this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
                el.removeClass('x-drop-target-active');
            }); 
        },  
    
        // Process the drop event.
        // This should be overriden by the instance.
        onNodeDrop: function(target, dd, e, dragData) {
        }   
    });
    Styles
    HTML Code:
    .x-drop-target-active {
        background-color: #ccffcc !important;
    }
    
    td.x-grid3-hd.x-drop-target-active, 
    td.x-grid3-hd-over.x-drop-target-active .x-grid3-hd-inner {
        background: none;
        background-color: #8cff8c !important;
    }
    Usage
    Code:
    .
    .
    .
        plugins: new Ext.ux.dd.ColumnDropZone({
            ddGroup: 'items_grid',
            onNodeDrop: function(target, dd, e, dragData) {
                if (!this.dropOK) return;
    
    
                msg = String.format('You dropped {0} into {1}', dragData.selections[0].data.name, target.)
                console.log(msg);
            },  
            dropIsValid: function(target, dd, e, dragData) {
                return target.column.dataIndex != 'id';
            }   
        }),
    .
    .
    .
    Example
    Code:
    // Adapted from http://dev.sencha.com/deploy/ext-3.4.0/examples/dd/field-to-grid-dd.js
    Ext.namespace('Ext.ux.dd');
    
    /*!
     * Ext JS Library 3.4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    // A DropZone which allows things to be dropped onto a grid.
    // This is not necessary by itself, bu serves as a base for
    // CellDropZone and ColumnDropZone.
    Ext.ux.dd.ColumnDropZone = Ext.extend(Ext.dd.DropZone, {
        constructor : function(config) {
            if (config)
                Ext.apply(this, config);
        },  
    
        // Call the DropZone constructor using the grid's element
        // only after the grid has been rendered.
        init: function(grid) {
            if (grid.rendered) {
                this.grid = grid;
                this.view = grid.getView();
                this.store = grid.getStore();
                this.ddGroup = this.ddGroup || grid.ddGroup || 'GridDD';
                Ext.ux.dd.ColumnDropZone.superclass.constructor.call(this, this.grid.getEl());
            } else {
                grid.on('render', this.init, this);
            }   
        },  
    
        // Scroll the main configured Element when we drag close to the edge
        containerScroll: true,
    
        // Whether or not to highlight the target if it is invalid.
        showActiveOnInvalid: false,
    
        getTargetFromEvent: function(e) {
            // Ascertain whether the mousemove is within a grid cell
            var cell = e.getTarget(this.view.cellSelector);
            if (cell) {
                // We *are* within a grid cell/header, so ask the View exactly which one,
                // Extract data from the Model to create a target object for
                // processing in subsequent onNodeXXXX methods. Note that the target does
                // not have to be a DOM element. It can be whatever the noNodeXXX methods are
                // programmed to expect.
                var columnIndex = this.view.findCellIndex(cell);
                if (columnIndex !== false) {
                    return {
                        node: cell,
                        columnIndex: columnIndex,
                        column: this.grid.getColumnModel().getColumnAt(columnIndex)
                    };  
                }   
            }   
        },  
    
        // On Node enter, see if it is valid for us to drop the field on that type of column.
        onNodeEnter: function(target, dd, e, dragData) {
            this.dropOK = false;
            if (!target) {
                return;
            }   
    
            if (this.dropIsValid) {
                this.dropOK = this.dropIsValid(target, dd, e, dragData);
            } else {
                this.dropOK = true;
            }   
            if (this.dropOK || this.showActiveOnInvalid) {
                this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
                    el.addClass('x-drop-target-active');
                }); 
            }   
        },  
    
        // Unhighlight the target node.
        onNodeOut: function(target, dd, e, dragData) {
            this.grid.getEl().select(String.format('.x-grid3-td-{0}', target.column.id)).each(function(el) {
                el.removeClass('x-drop-target-active');
            }); 
        },  
    
        // Process the drop event.
        // This should be overriden by the instance.
        onNodeDrop: function(target, dd, e, dragData) {
        }   
    });
    
    
    var items_grid = new Ext.grid.GridPanel({
        renderTo: 'items_grid',
        height: 400,
        width: 300,
        viewConfig: {
            forceFit: true
        },
        enableDragDrop: true,
        ddGroup: 'items_grid',
        store: {
            xtype: 'jsonstore',
            root: 'items',
            fields: ['id', 'name'],
            data: {
                items: [
                    {id: 1, name: 'orange'},
                    {id: 2, name: 'milk'},
                    {id: 3, name: 'eggs'},
                    {id: 4, name: 'cheese'},
                    {id: 5, name: 'beef'},
                    {id: 6, name: 'apple'},
                    {id: 7, name: 'candy'},
                    {id: 8, name: 'bread'},
                    {id: 8, name: 'butter'}
                ]
            }
        },
        columns: [
            {
                header: 'ID',
                dataIndex: 'id'
            },
            {
                header: 'Name',
                dataIndex: 'name'
            }
        ]
    });
    
    var categories_grid = new Ext.grid.GridPanel({
        renderTo: 'categories_grid',
        height: 400,
        width: 710,
        enableHdMenu: false,
        columnLines: true,
        ddGroup: 'items_grid',
        plugins: new Ext.ux.dd.ColumnDropZone({
            ddGroup: 'items_grid',
            onNodeDrop: function(target, dd, e, dragData) {
                if (!this.dropOK) return;
    
                msg = String.format('You dropped {0} into {1}', dragData.selections[0].data.name, target.)
                console.log(msg);
            },  
            dropIsValid: function(target, dd, e, dragData) {
                return target.column.dataIndex != 'id';
            }   
        }), 
        store: {
            xtype: 'jsonstore',
            root: 'items',
            fields: ['id', 'cereal', 'dairy', 'protein', 'fruit', 'vegetable', 'junk'],
            data: {
                items: [
                    {id: 1, cereal: 1, dairy: 2, protein: 3, fruit: 4, vegetable: 5, junk: 6}
                ]   
            }   
        },  
        columns: [
            {   
                header: 'ID',
                dataIndex: 'id'
            },  
    
            {   
                header: 'Ceareal',
                dataIndex: 'cereal'
            },  
            {   
                header: 'Dairy',
                dataIndex: 'dairy'
            },  
            {   
                header: 'Protein',
                dataIndex: 'protein'
            },  
            {   
                header: 'Fruit',
                dataIndex: 'fruit'
            },
            {
                header: 'Vegetable',
                dataIndex: 'vegetable'
            },
            {
                header: 'Junk',
                dataIndex: 'junk'
            }
        ]
    });
    Screen Shots
    Valid column:
    row_to_grid_valid.jpg

    Invalid column:
    row_to_grid_invalid.jpg
    I know that this is not a great example, but it demonstrates the desired functionality.

Thread Participants: 2