Clear Up
SharpKit Reference

DragDrop Class

This plugin provides drag and/or drop functionality for a GridView.

It creates a specialized instance of DragZone which knows how to drag out of a GridView and loads the data object which is passed to a cooperating DragZone's methods with the following properties:

  • copy : Boolean

    The value of the GridView's copy property, or true if the GridView was configured with allowCopy: trueand the control key was pressed when the drag operation was begun.

  • view : GridView

    The source GridView from which the drag originated.

  • ddel : HtmlElement

    The drag proxy element which moves with the mouse

  • item : HtmlElement

    The GridView node upon which the mousedown event was registered.

  • records : Array

    An Array of Models representing the selected data being dragged from the source GridView.

It also creates a specialized instance of Ext.dd.DropZone which cooperates with other DropZones which are members of the same ddGroup which processes such data objects.

Adding this plugin to a view means that two new events may be fired from the client GridView, beforedrop and drop

  
    Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name'],
            data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
            proxy: {
            type: 'memory',
            reader: 'array'
            }
            });
            Ext.create('Ext.grid.Panel', {
            store: 'simpsonsStore',
            columns: [
            {header: 'Name',  dataIndex: 'name', flex: true}
            ],
            viewConfig: {
            plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
            }
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            

Namespace: Ext.grid.plugin

Fields

Name Description
ddGroup A named drag drop group to which this object belongs. If a group is specified, then both the DragZones and DropZone used by this plugin will only interact with other drag drop objects in the same group. Defaults to: "GridDD"
dragGroup The ddGroup to which the DragZone will belong. This defines which other DropZones the DragZone will interact with. Drag/DropZones only interact with other Drag/DropZones which are members of the same ddGroup.
dragText The text to show while dragging. Two placeholders can be used in the text:
  • {0} The number of selected items.
  • {1} 's' when more than 1 items (only useful for English).
  • Defaults to: "{0} selected row{1}"
    dropGroup The ddGroup to which the DropZone will belong. This defines which other DragZones the DropZone will interact with. Drag/DropZones only interact with other Drag/DropZones which are members of the same ddGroup.
    enableDrag False to disallow dragging items from the View. Defaults to: true
    enableDrop False to disallow the View from accepting drop gestures. Defaults to: true
    © Copyright 2005-2011 SharpKit. All rights reserved.