3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * @class Ext.view.DragZone
17 * @extends Ext.dd.DragZone
20 Ext.define('Ext.view.DragZone', {
21 extend: 'Ext.dd.DragZone',
22 containerScroll: false,
24 constructor: function(config) {
27 Ext.apply(me, config);
29 // Create a ddGroup unless one has been configured.
30 // User configuration of ddGroups allows users to specify which
31 // DD instances can interact with each other. Using one
32 // based on the id of the View would isolate it and mean it can only
33 // interact with a DropZone on the same View also using a generated ID.
35 me.ddGroup = 'view-dd-zone-' + me.view.id;
38 // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
39 // So a View's DragZone cannot use the View's main element because the DropZone must use that
40 // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
41 // main element which handles scrolling.
42 // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
43 // is transient; DataView's recreate the internal structure dynamically as data changes.
44 // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
45 me.callParent([me.view.el.dom.parentNode]);
47 me.ddel = Ext.get(document.createElement('div'));
48 me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
51 init: function(id, sGroup, config) {
52 this.initTarget(id, sGroup, config);
53 this.view.mon(this.view, {
54 itemmousedown: this.onItemMouseDown,
59 onItemMouseDown: function(view, record, item, index, e) {
60 if (!this.isPreventDrag(e, record, item, index)) {
61 this.handleMouseDown(e);
63 // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
64 // if the mousedowned record is selected
65 if (view.getSelectionModel().selectionMode == 'MULTI' && !e.ctrlKey && view.getSelectionModel().isSelected(record)) {
71 // private template method
72 isPreventDrag: function(e) {
76 getDragData: function(e) {
78 item = e.getTarget(view.getItemSelector()),
79 record, selectionModel, records;
82 record = view.getRecord(item);
83 selectionModel = view.getSelectionModel();
84 records = selectionModel.getSelection();
86 copy: this.view.copy || (this.view.allowCopy && e.ctrlKey),
87 event: new Ext.EventObjectImpl(e),
92 fromPosition: Ext.fly(item).getXY()
97 onInitDrag: function(x, y) {
101 selectionModel = view.getSelectionModel(),
102 record = view.getRecord(data.item),
105 // Update the selection to match what would have been selected if the user had
106 // done a full click on the target node rather than starting a drag from it
107 if (!selectionModel.isSelected(record) || e.hasModifier()) {
108 selectionModel.selectWithEvent(record, e, true);
110 data.records = selectionModel.getSelection();
112 me.ddel.update(me.getDragText());
113 me.proxy.update(me.ddel.dom);
114 me.onStartDrag(x, y);
118 getDragText: function() {
119 var count = this.dragData.records.length;
120 return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
123 getRepairXY : function(e, data){
124 return data ? data.fromPosition : false;