dragdrop

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

CSS

.y-start {
    border-top: 1px solid #000 !important;
}
.y-between {
    border-left: 1px solid #000 !important;
    border-right: 1px solid #000 !important;
}
.y-end {
    border-bottom: 1px solid #000 !important;
   
}
.y-end .y-corner {
    background: url("data:image/gif;base64,R0lGODlhCgAKAPAAAAAAAAAAACH5BAEAAAEAIf4oRWRpdGVkIHdpdGggTHVuYVBpYzogaHR0cDovL2x1bmFwaWMuY29tLwAsAAAAAAoACgAAAg6Mj6nL7QgYiGpSaJOdBQA7");
    background-position: 0px -5px;
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    float: right;
    margin: 0;
    padding: 0px;
    cursor: pointer;
    position: relative;
    right: 0px;
    bottom: 5px;
    margin-bottom: -10px;
} /* <div class="y-corner"></div> */

JavaScript

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            "name": "Lisa",
                "email": "[email protected]",
                "phone": "555-111-1224"
        }, {
            "name": "Bart",
                "email": "[email protected]",
                "phone": "555-222-1234"
        }, {
            "name": "Homer",
                "email": "[email protected]",
                "phone": "555-222-1244"
        }, {
            "name": "Marge",
                "email": "[email protected]",
                "phone": "555-222-1254"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.define('Ceres.view.ux.DragCopy', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.dragcopy',

    init: function(grid) {
        var me = this;
        console.log(grid, me);
        grid.on('cellmousedown', me.onCellMouseDown, this);
        grid.on('itemmouseenter', me.onCellMouseEnter, this);
    },
    onCellMouseDown: function (gridView, td, cellIndex, record, tr, rowIndex, e, eOpts) {
        var me = this,
            column = gridView.headerCt.getHeaderAtIndex(cellIndex),
            grid = gridView.ownerCt;
        
        if (grid.ownerLockable) {
            grid = grid.ownerLockable;
        }
        grid.start = {
            gridView: gridView,
            x: cellIndex,
            y: rowIndex,
            record: record,
            column: column
        };
        me.mark(grid, rowIndex, rowIndex, cellIndex);
        grid.mon(Ext.getBody(), 'mouseup', function(){
            var grid = gridView.ownerCt;
            
            if (grid.ownerLockable) {
                grid = grid.ownerLockable;
            }
            console.log('bam');
            grid.start = null;                    
        }, this, {
            single: true
        });
        
    },
   ...