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.ux.DataView.Draggable
21 Ext.create('Ext.view.View', {
23 draggable: 'Ext.ux.DataView.Draggable'
26 initComponent: function() {
27 this.mixins.draggable.init(this, {
33 this.callParent(arguments);
39 Ext.define('Ext.ux.DataView.Draggable', {
40 requires: 'Ext.dd.DragZone',
43 * @cfg {String} ghostCls The CSS class added to the outermost element of the created ghost proxy
44 * (defaults to 'x-dataview-draggable-ghost')
46 ghostCls: 'x-dataview-draggable-ghost',
49 * @cfg {Ext.XTemplate/Array} ghostTpl The template used in the ghost DataView
58 * @cfg {Object} ddConfig Config object that is applied to the internally created DragZone
62 * @cfg {String} ghostConfig Config object that is used to configure the internally created DataView
65 init: function(dataview, config) {
69 * The Ext.view.View instance that this DragZone is attached to
71 this.dataview = dataview;
73 dataview.on('render', this.onRender, this);
76 itemSelector: dataview.itemSelector,
80 Ext.applyIf(this.ghostConfig, {
89 * Called when the attached DataView is rendered. Sets up the internal DragZone
91 onRender: function() {
92 var config = Ext.apply({}, this.ddConfig || {}, {
94 dataview : this.dataview,
95 getDragData: this.getDragData,
96 getTreeNode: this.getTreeNode,
97 afterRepair: this.afterRepair,
98 getRepairXY: this.getRepairXY
103 * @type Ext.dd.DragZone
104 * The attached DragZone instane
106 this.dragZone = Ext.create('Ext.dd.DragZone', this.dataview.getEl(), config);
109 getDragData: function(e) {
110 var draggable = this.dvDraggable,
111 dataview = this.dataview,
112 selModel = dataview.getSelectionModel(),
113 target = e.getTarget(draggable.itemSelector),
117 if (!dataview.isSelected(target)) {
118 selModel.select(dataview.getRecord(target));
121 selected = dataview.getSelectedNodes();
125 records: selModel.getSelection(),
129 if (selected.length == 1) {
130 dragData.single = true;
131 dragData.ddel = target;
133 dragData.multi = true;
134 dragData.ddel = draggable.prepareGhost(selModel.getSelection()).dom;
143 getTreeNode: function() {
144 // console.log('test');
147 afterRepair: function() {
148 this.dragging = false;
150 var nodes = this.dragData.nodes,
151 length = nodes.length,
154 //FIXME: Ext.fly does not work here for some reason, only frames the last node
155 for (i = 0; i < length; i++) {
156 Ext.get(nodes[i]).frame('#8db2e3', 1);
162 * Returns the x and y co-ordinates that the dragged item should be animated back to if it was dropped on an
163 * invalid drop target. If we're dragging more than one item we don't animate back and just allow afterRepair
164 * to frame each dropped item.
166 getRepairXY: function(e) {
167 if (this.dragData.multi) {
170 var repairEl = Ext.get(this.dragData.ddel),
171 repairXY = repairEl.getXY();
173 //take the item's margins and padding into account to make the repair animation line up perfectly
174 repairXY[0] += repairEl.getPadding('t') + repairEl.getMargin('t');
175 repairXY[1] += repairEl.getPadding('l') + repairEl.getMargin('l');
182 * Updates the internal ghost DataView by ensuring it is rendered and contains the correct records
183 * @param {Array} records The set of records that is currently selected in the parent DataView
184 * @return {Ext.view.View} The Ghost DataView
186 prepareGhost: function(records) {
187 var ghost = this.createGhost(records),
193 return ghost.getEl();
198 * Creates the 'ghost' DataView that follows the mouse cursor during the drag operation. This div is usually a
199 * lighter-weight representation of just the nodes that are selected in the parent DataView. Delegates the creation
200 * of each selected item's element to {@link createGhostElement}
202 createGhost: function(records) {
204 var ghostConfig = Ext.apply({}, this.ghostConfig, {
205 store: Ext.create('Ext.data.Store', {
206 model: records[0].modelName
210 this.ghost = Ext.create('Ext.view.View', ghostConfig);
212 this.ghost.render(document.createElement('div'));