Provides automatic scrolling of overflow regions in the page during drag operations.
- *The ScrollManager configs will be used as the defaults for any scroll container registered with it, - * but you can also override most of the configs per scroll container by adding a - * ddScrollConfig object to the target element that contains these properties: {@link #hthresh}, - * {@link #vthresh}, {@link #increment} and {@link #frequency}. Example usage: - *
-var el = Ext.get('scroll-ct');
-el.ddScrollConfig = {
- vthresh: 50,
- hthresh: -1,
- frequency: 100,
- increment: 200
-};
-Ext.dd.ScrollManager.register(el);
--Value Description- */ - register : function(el, data){ - data = data || {}; - if(typeof el == "string"){ - el = document.getElementById(el); - } - data.ddel = el; - elements[getId(el)] = data; - if(data.isHandle !== false){ - handles[data.ddel.id] = data; - } - if(data.handles){ - var hs = data.handles; - for(var i = 0, len = hs.length; i < len; i++){ - handles[getId(hs[i])] = data; - } - } - }, - - /** - * Unregister a drag drop element - * @param {String/HTMLElement) element The id or DOM node to unregister - */ - unregister : function(el){ - var id = getId(el, false); - var data = elements[id]; - if(data){ - delete elements[id]; - if(data.handles){ - var hs = data.handles; - for(var i = 0, len = hs.length; i < len; i++){ - delete handles[getId(hs[i], false)]; - } - } - } - }, - - /** - * Returns the handle registered for a DOM Node by id - * @param {String/HTMLElement} id The DOM node or id to look up - * @return {Object} handle The custom handle data - */ - getHandle : function(id){ - if(typeof id != "string"){ // must be element? - id = id.id; - } - return handles[id]; - }, - - /** - * Returns the handle that is registered for the DOM node that is the target of the event - * @param {Event} e The event - * @return {Object} handle The custom handle data - */ - getHandleFromEvent : function(e){ - var t = Ext.lib.Event.getTarget(e); - return t ? handles[t.id] : null; - }, - - /** - * Returns a custom data object that is registered for a DOM node by id - * @param {String/HTMLElement} id The DOM node or id to look up - * @return {Object} data The custom data - */ - getTarget : function(id){ - if(typeof id != "string"){ // must be element? - id = id.id; - } - return elements[id]; - }, - - /** - * Returns a custom data object that is registered for the DOM node that is the target of the event - * @param {Event} e The event - * @return {Object} data The custom data - */ - getTargetFromEvent : function(e){ - var t = Ext.lib.Event.getTarget(e); - return t ? elements[t.id] || handles[t.id] : null; - } - }; -}();/** - * @class Ext.dd.StatusProxy - * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the - * default drag proxy used by all Ext.dd components. - * @constructor - * @param {Object} config - */ -Ext.dd.StatusProxy = function(config){ - Ext.apply(this, config); - this.id = this.id || Ext.id(); - this.el = new Ext.Layer({ - dh: { - id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [ - {tag: "div", cls: "x-dd-drop-icon"}, - {tag: "div", cls: "x-dd-drag-ghost"} - ] - }, - shadow: !config || config.shadow !== false - }); - this.ghost = Ext.get(this.el.dom.childNodes[1]); - this.dropStatus = this.dropNotAllowed; -}; - -Ext.dd.StatusProxy.prototype = { - /** - * @cfg {String} dropAllowed - * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok"). - */ - dropAllowed : "x-dd-drop-ok", - /** - * @cfg {String} dropNotAllowed - * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop"). - */ - dropNotAllowed : "x-dd-drop-nodrop", - - /** - * Updates the proxy's visual element to indicate the status of whether or not drop is allowed - * over the current target element. - * @param {String} cssClass The css class for the new drop status indicator image - */ - setStatus : function(cssClass){ - cssClass = cssClass || this.dropNotAllowed; - if(this.dropStatus != cssClass){ - this.el.replaceClass(this.dropStatus, cssClass); - this.dropStatus = cssClass; - } - }, - - /** - * Resets the status indicator to the default dropNotAllowed value - * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it - */ - reset : function(clearGhost){ - this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed; - this.dropStatus = this.dropNotAllowed; - if(clearGhost){ - this.ghost.update(""); - } - }, - - /** - * Updates the contents of the ghost element - * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a - * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first). - */ - update : function(html){ - if(typeof html == "string"){ - this.ghost.update(html); - }else{ - this.ghost.update(""); - html.style.margin = "0"; - this.ghost.dom.appendChild(html); - } - var el = this.ghost.dom.firstChild; - if(el){ - Ext.fly(el).setStyle('float', 'none'); - } - }, - - /** - * Returns the underlying proxy {@link Ext.Layer} - * @return {Ext.Layer} el - */ - getEl : function(){ - return this.el; - }, - - /** - * Returns the ghost element - * @return {Ext.Element} el - */ - getGhost : function(){ - return this.ghost; - }, - - /** - * Hides the proxy - * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them - */ - hide : function(clear){ - this.el.hide(); - if(clear){ - this.reset(true); - } - }, - - /** - * Stops the repair animation if it's currently running - */ - stop : function(){ - if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){ - this.anim.stop(); - } - }, - - /** - * Displays this proxy - */ - show : function(){ - this.el.show(); - }, - - /** - * Force the Layer to sync its shadow and shim positions to the element - */ - sync : function(){ - this.el.sync(); - }, - - /** - * Causes the proxy to return to its position of origin via an animation. Should be called after an - * invalid drop operation by the item being dragged. - * @param {Array} xy The XY position of the element ([x, y]) - * @param {Function} callback The function to call after the repair is complete - * @param {Object} scope The scope in which to execute the callback - */ - repair : function(xy, callback, scope){ - this.callback = callback; - this.scope = scope; - if(xy && this.animRepair !== false){ - this.el.addClass("x-dd-drag-repair"); - this.el.hideUnders(true); - this.anim = this.el.shift({ - duration: this.repairDuration || .5, - easing: 'easeOut', - xy: xy, - stopFx: true, - callback: this.afterRepair, - scope: this - }); - }else{ - this.afterRepair(); - } - }, - - // private - afterRepair : function(){ - this.hide(true); - if(typeof this.callback == "function"){ - this.callback.call(this.scope || this); - } - this.callback = null; - this.scope = null; - } -};/** - * @class Ext.dd.DragSource - * @extends Ext.dd.DDProxy - * A simple class that provides the basic implementation needed to make any element draggable. - * @constructor - * @param {Mixed} el The container element - * @param {Object} config - */ -Ext.dd.DragSource = function(el, config){ - this.el = Ext.get(el); - if(!this.dragData){ - this.dragData = {}; - } - - Ext.apply(this, config); - - if(!this.proxy){ - this.proxy = new Ext.dd.StatusProxy(); - } - Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, - {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true}); - - this.dragging = false; -}; - -Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, { - /** - * @cfg {String} ddGroup - * A named drag drop group to which this object belongs. If a group is specified, then this object will only - * interact with other drag drop objects in the same group (defaults to undefined). - */ - /** - * @cfg {String} dropAllowed - * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok"). - */ - dropAllowed : "x-dd-drop-ok", - /** - * @cfg {String} dropNotAllowed - * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop"). - */ - dropNotAllowed : "x-dd-drop-nodrop", - - /** - * Returns the data object associated with this drag source - * @return {Object} data An object containing arbitrary data - */ - getDragData : function(e){ - return this.dragData; - }, - - // private - onDragEnter : function(e, id){ - var target = Ext.dd.DragDropMgr.getDDById(id); - this.cachedTarget = target; - if(this.beforeDragEnter(target, e, id) !== false){ - if(target.isNotifyTarget){ - var status = target.notifyEnter(this, e, this.dragData); - this.proxy.setStatus(status); - }else{ - this.proxy.setStatus(this.dropAllowed); - } - - if(this.afterDragEnter){ - /** - * An empty function by default, but provided so that you can perform a custom action - * when the dragged item enters the drop target by providing an implementation. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @method afterDragEnter - */ - this.afterDragEnter(target, e, id); - } - } - }, - - /** - * An empty function by default, but provided so that you can perform a custom action - * before the dragged item enters the drop target and optionally cancel the onDragEnter. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @return {Boolean} isValid True if the drag event is valid, else false to cancel - */ - beforeDragEnter : function(target, e, id){ - return true; - }, - - // private - alignElWithMouse: function() { - Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments); - this.proxy.sync(); - }, - - // private - onDragOver : function(e, id){ - var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id); - if(this.beforeDragOver(target, e, id) !== false){ - if(target.isNotifyTarget){ - var status = target.notifyOver(this, e, this.dragData); - this.proxy.setStatus(status); - } - - if(this.afterDragOver){ - /** - * An empty function by default, but provided so that you can perform a custom action - * while the dragged item is over the drop target by providing an implementation. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @method afterDragOver - */ - this.afterDragOver(target, e, id); - } - } - }, - - /** - * An empty function by default, but provided so that you can perform a custom action - * while the dragged item is over the drop target and optionally cancel the onDragOver. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @return {Boolean} isValid True if the drag event is valid, else false to cancel - */ - beforeDragOver : function(target, e, id){ - return true; - }, - - // private - onDragOut : function(e, id){ - var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id); - if(this.beforeDragOut(target, e, id) !== false){ - if(target.isNotifyTarget){ - target.notifyOut(this, e, this.dragData); - } - this.proxy.reset(); - if(this.afterDragOut){ - /** - * An empty function by default, but provided so that you can perform a custom action - * after the dragged item is dragged out of the target without dropping. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @method afterDragOut - */ - this.afterDragOut(target, e, id); - } - } - this.cachedTarget = null; - }, - - /** - * An empty function by default, but provided so that you can perform a custom action before the dragged - * item is dragged out of the target without dropping, and optionally cancel the onDragOut. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @return {Boolean} isValid True if the drag event is valid, else false to cancel - */ - beforeDragOut : function(target, e, id){ - return true; - }, - - // private - onDragDrop : function(e, id){ - var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id); - if(this.beforeDragDrop(target, e, id) !== false){ - if(target.isNotifyTarget){ - if(target.notifyDrop(this, e, this.dragData)){ // valid drop? - this.onValidDrop(target, e, id); - }else{ - this.onInvalidDrop(target, e, id); - } - }else{ - this.onValidDrop(target, e, id); - } - - if(this.afterDragDrop){ - /** - * An empty function by default, but provided so that you can perform a custom action - * after a valid drag drop has occurred by providing an implementation. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dropped element - * @method afterDragDrop - */ - this.afterDragDrop(target, e, id); - } - } - delete this.cachedTarget; - }, - - /** - * An empty function by default, but provided so that you can perform a custom action before the dragged - * item is dropped onto the target and optionally cancel the onDragDrop. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel - */ - beforeDragDrop : function(target, e, id){ - return true; - }, - - // private - onValidDrop : function(target, e, id){ - this.hideProxy(); - if(this.afterValidDrop){ - /** - * An empty function by default, but provided so that you can perform a custom action - * after a valid drop has occurred by providing an implementation. - * @param {Object} target The target DD - * @param {Event} e The event object - * @param {String} id The id of the dropped element - * @method afterInvalidDrop - */ - this.afterValidDrop(target, e, id); - } - }, - - // private - getRepairXY : function(e, data){ - return this.el.getXY(); - }, - - // private - onInvalidDrop : function(target, e, id){ - this.beforeInvalidDrop(target, e, id); - if(this.cachedTarget){ - if(this.cachedTarget.isNotifyTarget){ - this.cachedTarget.notifyOut(this, e, this.dragData); - } - this.cacheTarget = null; - } - this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this); - - if(this.afterInvalidDrop){ - /** - * An empty function by default, but provided so that you can perform a custom action - * after an invalid drop has occurred by providing an implementation. - * @param {Event} e The event object - * @param {String} id The id of the dropped element - * @method afterInvalidDrop - */ - this.afterInvalidDrop(e, id); - } - }, - - // private - afterRepair : function(){ - if(Ext.enableFx){ - this.el.highlight(this.hlColor || "c3daf9"); - } - this.dragging = false; - }, - - /** - * An empty function by default, but provided so that you can perform a custom action after an invalid - * drop has occurred. - * @param {Ext.dd.DragDrop} target The drop target - * @param {Event} e The event object - * @param {String} id The id of the dragged element - * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel - */ - beforeInvalidDrop : function(target, e, id){ - return true; - }, - - // private - handleMouseDown : function(e){ - if(this.dragging) { - return; - } - var data = this.getDragData(e); - if(data && this.onBeforeDrag(data, e) !== false){ - this.dragData = data; - this.proxy.stop(); - Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments); - } - }, - - /** - * An empty function by default, but provided so that you can perform a custom action before the initial - * drag event begins and optionally cancel it. - * @param {Object} data An object containing arbitrary data to be shared with drop targets - * @param {Event} e The event object - * @return {Boolean} isValid True if the drag event is valid, else false to cancel - */ - onBeforeDrag : function(data, e){ - return true; - }, - - /** - * An empty function by default, but provided so that you can perform a custom action once the initial - * drag event has begun. The drag cannot be canceled from this function. - * @param {Number} x The x position of the click on the dragged object - * @param {Number} y The y position of the click on the dragged object - */ - onStartDrag : Ext.emptyFn, - - // private override - startDrag : function(x, y){ - this.proxy.reset(); - this.dragging = true; - this.proxy.update(""); - this.onInitDrag(x, y); - this.proxy.show(); - }, - - // private - onInitDrag : function(x, y){ - var clone = this.el.dom.cloneNode(true); - clone.id = Ext.id(); // prevent duplicate ids - this.proxy.update(clone); - this.onStartDrag(x, y); - return true; - }, - - /** - * Returns the drag source's underlying {@link Ext.dd.StatusProxy} - * @return {Ext.dd.StatusProxy} proxy The StatusProxy - */ - getProxy : function(){ - return this.proxy; - }, - - /** - * Hides the drag source's {@link Ext.dd.StatusProxy} - */ - hideProxy : function(){ - this.proxy.hide(); - this.proxy.reset(true); - this.dragging = false; - }, - - // private - triggerCacheRefresh : function(){ - Ext.dd.DDM.refreshCache(this.groups); - }, - - // private - override to prevent hiding - b4EndDrag: function(e) { - }, - - // private - override to prevent moving - endDrag : function(e){ - this.onEndDrag(this.dragData, e); - }, - - // private - onEndDrag : function(data, e){ - }, - - // private - pin to cursor - autoOffset : function(x, y) { - this.setDelta(-12, -20); - } -});/** - * @class Ext.dd.DropTarget - * @extends Ext.dd.DDTarget - * A simple class that provides the basic implementation needed to make any element a drop target that can have - * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided. - * @constructor - * @param {Mixed} el The container element - * @param {Object} config - */ -Ext.dd.DropTarget = function(el, config){ - this.el = Ext.get(el); - - Ext.apply(this, config); - - if(this.containerScroll){ - Ext.dd.ScrollManager.register(this.el); - } - - Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, - {isTarget: true}); - -}; - -Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, { - /** - * @cfg {String} ddGroup - * A named drag drop group to which this object belongs. If a group is specified, then this object will only - * interact with other drag drop objects in the same group (defaults to undefined). - */ - /** - * @cfg {String} overClass - * The CSS class applied to the drop target element while the drag source is over it (defaults to ""). - */ - /** - * @cfg {String} dropAllowed - * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok"). - */ - dropAllowed : "x-dd-drop-ok", - /** - * @cfg {String} dropNotAllowed - * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop"). - */ - dropNotAllowed : "x-dd-drop-nodrop", - - // private - isTarget : true, - - // private - isNotifyTarget : true, - - /** - * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the - * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element - * and returns the dropAllowed config value. This method should be overridden if drop validation is required. - * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target - * @param {Event} e The event - * @param {Object} data An object containing arbitrary data supplied by the drag source - * @return {String} status The CSS class that communicates the drop status back to the source so that the - * underlying {@link Ext.dd.StatusProxy} can be updated - */ - notifyEnter : function(dd, e, data){ - if(this.overClass){ - this.el.addClass(this.overClass); - } - return this.dropAllowed; - }, - - /** - * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target. - * This method will be called on every mouse movement while the drag source is over the drop target. - * This default implementation simply returns the dropAllowed config value. - * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target - * @param {Event} e The event - * @param {Object} data An object containing arbitrary data supplied by the drag source - * @return {String} status The CSS class that communicates the drop status back to the source so that the - * underlying {@link Ext.dd.StatusProxy} can be updated - */ - notifyOver : function(dd, e, data){ - return this.dropAllowed; - }, - - /** - * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged - * out of the target without dropping. This default implementation simply removes the CSS class specified by - * overClass (if any) from the drop element. - * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target - * @param {Event} e The event - * @param {Object} data An object containing arbitrary data supplied by the drag source - */ - notifyOut : function(dd, e, data){ - if(this.overClass){ - this.el.removeClass(this.overClass); - } - }, - - /** - * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has - * been dropped on it. This method has no default implementation and returns false, so you must provide an - * implementation that does something to process the drop event and returns true so that the drag source's - * repair action does not run. - * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target - * @param {Event} e The event - * @param {Object} data An object containing arbitrary data supplied by the drag source - * @return {Boolean} True if the drop was valid, else false - */ - notifyDrop : function(dd, e, data){ - return false; - } -});/** - * @class Ext.dd.DragZone - * @extends Ext.dd.DragSource - *
---------- ------------------------------------------
-handles Array of DOM nodes that trigger dragging
- for the element being registered
-isHandle True if the element passed in triggers
- dragging itself, else false -
This class provides a container DD instance that allows dragging of multiple child source nodes.
- *This class does not move the drag target nodes, but a proxy element which may contain - * any DOM structure you wish. The DOM element to show in the proxy is provided by either a - * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
- *If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some - * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class - * is the most efficient way to "activate" those nodes.
- *By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. - * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure - * the DragZone with an implementation of the {@link #getDragData} method which interrogates the passed - * mouse event to see if it has taken place within an element, or class of elements. This is easily done - * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a - * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following - * technique. Knowledge of the use of the DataView is required:
-myDataView.on('render', function() {
- myDataView.dragZone = new Ext.dd.DragZone(myDataView.getEl(), {
-
-// On receipt of a mousedown event, see if it is within a DataView node.
-// Return a drag data object if so.
- getDragData: function(e) {
-
-// Use the DataView's own itemSelector (a mandatory property) to
-// test if the mousedown is within one of the DataView's nodes.
- var sourceEl = e.getTarget(myDataView.itemSelector, 10);
-
-// If the mousedown is within a DataView node, clone the node to produce
-// a ddel element for use by the drag proxy. Also add application data
-// to the returned data object.
- if (sourceEl) {
- d = sourceEl.cloneNode(true);
- d.id = Ext.id();
- return {
- ddel: d,
- sourceEl: sourceEl,
- repairXY: Ext.fly(sourceEl).getXY(),
- sourceStore: myDataView.store,
- draggedRecord: v.getRecord(sourceEl)
- }
- }
- },
-
-// Provide coordinates for the proxy to slide back to on failed drag.
-// This is the original XY coordinates of the draggable element captured
-// in the getDragData method.
- getRepairXY: function() {
- return this.dragData.repairXY;
- }
- });
-});This class provides a container DD instance that allows dropping on multiple child target nodes.
- *By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}. - * However a simpler way to allow a DropZone to manage any number of target elements is to configure the - * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed - * mouse event to see if it has taken place within an element, or class of elements. This is easily done - * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a - * {@link Ext.DomQuery} selector.
- *Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over - * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver}, - * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations - * of these methods to provide application-specific behaviour for these events to update both - * application state, and UI state.
- *For example to make a GridPanel a cooperating target with the example illustrated in - * {@link Ext.dd.DragZone DragZone}, the following technique might be used:
-myGridPanel.on('render', function() {
- myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
-
-// If the mouse is over a grid row, return that node. This is
-// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
- getTargetFromEvent: function(e) {
- return e.getTarget(myGridPanel.getView().rowSelector);
- },
-
-// On entry into a target node, highlight that node.
- onNodeEnter : function(target, dd, e, data){
- Ext.fly(target).addClass('my-row-highlight-class');
- },
-
-// On exit from a target node, unhighlight that node.
- onNodeOut : function(target, dd, e, data){
- Ext.fly(target).removeClass('my-row-highlight-class');
- },
-
-// While over a target node, return the default drop allowed class which
-// places a "tick" icon into the drag proxy.
- onNodeOver : function(target, dd, e, data){
- return Ext.dd.DropZone.prototype.dropAllowed;
- },
-
-// On node drop we can interrogate the target to find the underlying
-// application object that is the real target of the dragged data.
-// In this case, it is a Record in the GridPanel's Store.
-// We can use the data set up by the DragZone's getDragData method to read
-// any data we decided to attach in the DragZone's getDragData method.
- onNodeDrop : function(target, dd, e, data){
- var rowIndex = myGridPanel.getView().findRowIndex(target);
- var r = myGridPanel.getStore().getAt(rowIndex);
- Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
- ' on Record id ' + r.id);
- return true;
- }
- });
-}
-Provides automatic scrolling of overflow regions in the page during drag operations.
+ *The ScrollManager configs will be used as the defaults for any scroll container registered with it, + * but you can also override most of the configs per scroll container by adding a + * ddScrollConfig object to the target element that contains these properties: {@link #hthresh}, + * {@link #vthresh}, {@link #increment} and {@link #frequency}. Example usage: + *
+var el = Ext.get('scroll-ct');
+el.ddScrollConfig = {
+ vthresh: 50,
+ hthresh: -1,
+ frequency: 100,
+ increment: 200
+};
+Ext.dd.ScrollManager.register(el);
++Value Description+ */ + register : function(el, data){ + data = data || {}; + if(typeof el == "string"){ + el = document.getElementById(el); + } + data.ddel = el; + elements[getId(el)] = data; + if(data.isHandle !== false){ + handles[data.ddel.id] = data; + } + if(data.handles){ + var hs = data.handles; + for(var i = 0, len = hs.length; i < len; i++){ + handles[getId(hs[i])] = data; + } + } + }, + + /** + * Unregister a drag drop element + * @param {String/HTMLElement} element The id or DOM node to unregister + */ + unregister : function(el){ + var id = getId(el, false); + var data = elements[id]; + if(data){ + delete elements[id]; + if(data.handles){ + var hs = data.handles; + for(var i = 0, len = hs.length; i < len; i++){ + delete handles[getId(hs[i], false)]; + } + } + } + }, + + /** + * Returns the handle registered for a DOM Node by id + * @param {String/HTMLElement} id The DOM node or id to look up + * @return {Object} handle The custom handle data + */ + getHandle : function(id){ + if(typeof id != "string"){ // must be element? + id = id.id; + } + return handles[id]; + }, + + /** + * Returns the handle that is registered for the DOM node that is the target of the event + * @param {Event} e The event + * @return {Object} handle The custom handle data + */ + getHandleFromEvent : function(e){ + var t = Ext.lib.Event.getTarget(e); + return t ? handles[t.id] : null; + }, + + /** + * Returns a custom data object that is registered for a DOM node by id + * @param {String/HTMLElement} id The DOM node or id to look up + * @return {Object} data The custom data + */ + getTarget : function(id){ + if(typeof id != "string"){ // must be element? + id = id.id; + } + return elements[id]; + }, + + /** + * Returns a custom data object that is registered for the DOM node that is the target of the event + * @param {Event} e The event + * @return {Object} data The custom data + */ + getTargetFromEvent : function(e){ + var t = Ext.lib.Event.getTarget(e); + return t ? elements[t.id] || handles[t.id] : null; + } + }; +}();/** + * @class Ext.dd.StatusProxy + * A specialized drag proxy that supports a drop status icon, {@link Ext.Layer} styles and auto-repair. This is the + * default drag proxy used by all Ext.dd components. + * @constructor + * @param {Object} config + */ +Ext.dd.StatusProxy = function(config){ + Ext.apply(this, config); + this.id = this.id || Ext.id(); + this.el = new Ext.Layer({ + dh: { + id: this.id, tag: "div", cls: "x-dd-drag-proxy "+this.dropNotAllowed, children: [ + {tag: "div", cls: "x-dd-drop-icon"}, + {tag: "div", cls: "x-dd-drag-ghost"} + ] + }, + shadow: !config || config.shadow !== false + }); + this.ghost = Ext.get(this.el.dom.childNodes[1]); + this.dropStatus = this.dropNotAllowed; +}; + +Ext.dd.StatusProxy.prototype = { + /** + * @cfg {String} dropAllowed + * The CSS class to apply to the status element when drop is allowed (defaults to "x-dd-drop-ok"). + */ + dropAllowed : "x-dd-drop-ok", + /** + * @cfg {String} dropNotAllowed + * The CSS class to apply to the status element when drop is not allowed (defaults to "x-dd-drop-nodrop"). + */ + dropNotAllowed : "x-dd-drop-nodrop", + + /** + * Updates the proxy's visual element to indicate the status of whether or not drop is allowed + * over the current target element. + * @param {String} cssClass The css class for the new drop status indicator image + */ + setStatus : function(cssClass){ + cssClass = cssClass || this.dropNotAllowed; + if(this.dropStatus != cssClass){ + this.el.replaceClass(this.dropStatus, cssClass); + this.dropStatus = cssClass; + } + }, + + /** + * Resets the status indicator to the default dropNotAllowed value + * @param {Boolean} clearGhost True to also remove all content from the ghost, false to preserve it + */ + reset : function(clearGhost){ + this.el.dom.className = "x-dd-drag-proxy " + this.dropNotAllowed; + this.dropStatus = this.dropNotAllowed; + if(clearGhost){ + this.ghost.update(""); + } + }, + + /** + * Updates the contents of the ghost element + * @param {String/HTMLElement} html The html that will replace the current innerHTML of the ghost element, or a + * DOM node to append as the child of the ghost element (in which case the innerHTML will be cleared first). + */ + update : function(html){ + if(typeof html == "string"){ + this.ghost.update(html); + }else{ + this.ghost.update(""); + html.style.margin = "0"; + this.ghost.dom.appendChild(html); + } + var el = this.ghost.dom.firstChild; + if(el){ + Ext.fly(el).setStyle('float', 'none'); + } + }, + + /** + * Returns the underlying proxy {@link Ext.Layer} + * @return {Ext.Layer} el + */ + getEl : function(){ + return this.el; + }, + + /** + * Returns the ghost element + * @return {Ext.Element} el + */ + getGhost : function(){ + return this.ghost; + }, + + /** + * Hides the proxy + * @param {Boolean} clear True to reset the status and clear the ghost contents, false to preserve them + */ + hide : function(clear){ + this.el.hide(); + if(clear){ + this.reset(true); + } + }, + + /** + * Stops the repair animation if it's currently running + */ + stop : function(){ + if(this.anim && this.anim.isAnimated && this.anim.isAnimated()){ + this.anim.stop(); + } + }, + + /** + * Displays this proxy + */ + show : function(){ + this.el.show(); + }, + + /** + * Force the Layer to sync its shadow and shim positions to the element + */ + sync : function(){ + this.el.sync(); + }, + + /** + * Causes the proxy to return to its position of origin via an animation. Should be called after an + * invalid drop operation by the item being dragged. + * @param {Array} xy The XY position of the element ([x, y]) + * @param {Function} callback The function to call after the repair is complete. + * @param {Object} scope The scope (
+--------- ------------------------------------------
+handles Array of DOM nodes that trigger dragging
+ for the element being registered
+isHandle True if the element passed in triggers
+ dragging itself, else false +
this reference) in which the callback function is executed. Defaults to the browser window.
+ */
+ repair : function(xy, callback, scope){
+ this.callback = callback;
+ this.scope = scope;
+ if(xy && this.animRepair !== false){
+ this.el.addClass("x-dd-drag-repair");
+ this.el.hideUnders(true);
+ this.anim = this.el.shift({
+ duration: this.repairDuration || .5,
+ easing: 'easeOut',
+ xy: xy,
+ stopFx: true,
+ callback: this.afterRepair,
+ scope: this
+ });
+ }else{
+ this.afterRepair();
+ }
+ },
+
+ // private
+ afterRepair : function(){
+ this.hide(true);
+ if(typeof this.callback == "function"){
+ this.callback.call(this.scope || this);
+ }
+ this.callback = null;
+ this.scope = null;
+ },
+
+ destroy: function(){
+ Ext.destroy(this.ghost, this.el);
+ }
+};/**
+ * @class Ext.dd.DragSource
+ * @extends Ext.dd.DDProxy
+ * A simple class that provides the basic implementation needed to make any element draggable.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DragSource = function(el, config){
+ this.el = Ext.get(el);
+ if(!this.dragData){
+ this.dragData = {};
+ }
+
+ Ext.apply(this, config);
+
+ if(!this.proxy){
+ this.proxy = new Ext.dd.StatusProxy();
+ }
+ Ext.dd.DragSource.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
+ {dragElId : this.proxy.id, resizeFrame: false, isTarget: false, scroll: this.scroll === true});
+
+ this.dragging = false;
+};
+
+Ext.extend(Ext.dd.DragSource, Ext.dd.DDProxy, {
+ /**
+ * @cfg {String} ddGroup
+ * A named drag drop group to which this object belongs. If a group is specified, then this object will only
+ * interact with other drag drop objects in the same group (defaults to undefined).
+ */
+ /**
+ * @cfg {String} dropAllowed
+ * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+ */
+ dropAllowed : "x-dd-drop-ok",
+ /**
+ * @cfg {String} dropNotAllowed
+ * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+ */
+ dropNotAllowed : "x-dd-drop-nodrop",
+
+ /**
+ * Returns the data object associated with this drag source
+ * @return {Object} data An object containing arbitrary data
+ */
+ getDragData : function(e){
+ return this.dragData;
+ },
+
+ // private
+ onDragEnter : function(e, id){
+ var target = Ext.dd.DragDropMgr.getDDById(id);
+ this.cachedTarget = target;
+ if(this.beforeDragEnter(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ var status = target.notifyEnter(this, e, this.dragData);
+ this.proxy.setStatus(status);
+ }else{
+ this.proxy.setStatus(this.dropAllowed);
+ }
+
+ if(this.afterDragEnter){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * when the dragged item enters the drop target by providing an implementation.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragEnter
+ */
+ this.afterDragEnter(target, e, id);
+ }
+ }
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * before the dragged item enters the drop target and optionally cancel the onDragEnter.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+ */
+ beforeDragEnter : function(target, e, id){
+ return true;
+ },
+
+ // private
+ alignElWithMouse: function() {
+ Ext.dd.DragSource.superclass.alignElWithMouse.apply(this, arguments);
+ this.proxy.sync();
+ },
+
+ // private
+ onDragOver : function(e, id){
+ var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragOver(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ var status = target.notifyOver(this, e, this.dragData);
+ this.proxy.setStatus(status);
+ }
+
+ if(this.afterDragOver){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * while the dragged item is over the drop target by providing an implementation.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragOver
+ */
+ this.afterDragOver(target, e, id);
+ }
+ }
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * while the dragged item is over the drop target and optionally cancel the onDragOver.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+ */
+ beforeDragOver : function(target, e, id){
+ return true;
+ },
+
+ // private
+ onDragOut : function(e, id){
+ var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragOut(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ target.notifyOut(this, e, this.dragData);
+ }
+ this.proxy.reset();
+ if(this.afterDragOut){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after the dragged item is dragged out of the target without dropping.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @method afterDragOut
+ */
+ this.afterDragOut(target, e, id);
+ }
+ }
+ this.cachedTarget = null;
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action before the dragged
+ * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+ */
+ beforeDragOut : function(target, e, id){
+ return true;
+ },
+
+ // private
+ onDragDrop : function(e, id){
+ var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
+ if(this.beforeDragDrop(target, e, id) !== false){
+ if(target.isNotifyTarget){
+ if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
+ this.onValidDrop(target, e, id);
+ }else{
+ this.onInvalidDrop(target, e, id);
+ }
+ }else{
+ this.onValidDrop(target, e, id);
+ }
+
+ if(this.afterDragDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after a valid drag drop has occurred by providing an implementation.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterDragDrop
+ */
+ this.afterDragDrop(target, e, id);
+ }
+ }
+ delete this.cachedTarget;
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action before the dragged
+ * item is dropped onto the target and optionally cancel the onDragDrop.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
+ */
+ beforeDragDrop : function(target, e, id){
+ return true;
+ },
+
+ // private
+ onValidDrop : function(target, e, id){
+ this.hideProxy();
+ if(this.afterValidDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after a valid drop has occurred by providing an implementation.
+ * @param {Object} target The target DD
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterInvalidDrop
+ */
+ this.afterValidDrop(target, e, id);
+ }
+ },
+
+ // private
+ getRepairXY : function(e, data){
+ return this.el.getXY();
+ },
+
+ // private
+ onInvalidDrop : function(target, e, id){
+ this.beforeInvalidDrop(target, e, id);
+ if(this.cachedTarget){
+ if(this.cachedTarget.isNotifyTarget){
+ this.cachedTarget.notifyOut(this, e, this.dragData);
+ }
+ this.cacheTarget = null;
+ }
+ this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
+
+ if(this.afterInvalidDrop){
+ /**
+ * An empty function by default, but provided so that you can perform a custom action
+ * after an invalid drop has occurred by providing an implementation.
+ * @param {Event} e The event object
+ * @param {String} id The id of the dropped element
+ * @method afterInvalidDrop
+ */
+ this.afterInvalidDrop(e, id);
+ }
+ },
+
+ // private
+ afterRepair : function(){
+ if(Ext.enableFx){
+ this.el.highlight(this.hlColor || "c3daf9");
+ }
+ this.dragging = false;
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action after an invalid
+ * drop has occurred.
+ * @param {Ext.dd.DragDrop} target The drop target
+ * @param {Event} e The event object
+ * @param {String} id The id of the dragged element
+ * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
+ */
+ beforeInvalidDrop : function(target, e, id){
+ return true;
+ },
+
+ // private
+ handleMouseDown : function(e){
+ if(this.dragging) {
+ return;
+ }
+ var data = this.getDragData(e);
+ if(data && this.onBeforeDrag(data, e) !== false){
+ this.dragData = data;
+ this.proxy.stop();
+ Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
+ }
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action before the initial
+ * drag event begins and optionally cancel it.
+ * @param {Object} data An object containing arbitrary data to be shared with drop targets
+ * @param {Event} e The event object
+ * @return {Boolean} isValid True if the drag event is valid, else false to cancel
+ */
+ onBeforeDrag : function(data, e){
+ return true;
+ },
+
+ /**
+ * An empty function by default, but provided so that you can perform a custom action once the initial
+ * drag event has begun. The drag cannot be canceled from this function.
+ * @param {Number} x The x position of the click on the dragged object
+ * @param {Number} y The y position of the click on the dragged object
+ */
+ onStartDrag : Ext.emptyFn,
+
+ // private override
+ startDrag : function(x, y){
+ this.proxy.reset();
+ this.dragging = true;
+ this.proxy.update("");
+ this.onInitDrag(x, y);
+ this.proxy.show();
+ },
+
+ // private
+ onInitDrag : function(x, y){
+ var clone = this.el.dom.cloneNode(true);
+ clone.id = Ext.id(); // prevent duplicate ids
+ this.proxy.update(clone);
+ this.onStartDrag(x, y);
+ return true;
+ },
+
+ /**
+ * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
+ * @return {Ext.dd.StatusProxy} proxy The StatusProxy
+ */
+ getProxy : function(){
+ return this.proxy;
+ },
+
+ /**
+ * Hides the drag source's {@link Ext.dd.StatusProxy}
+ */
+ hideProxy : function(){
+ this.proxy.hide();
+ this.proxy.reset(true);
+ this.dragging = false;
+ },
+
+ // private
+ triggerCacheRefresh : function(){
+ Ext.dd.DDM.refreshCache(this.groups);
+ },
+
+ // private - override to prevent hiding
+ b4EndDrag: function(e) {
+ },
+
+ // private - override to prevent moving
+ endDrag : function(e){
+ this.onEndDrag(this.dragData, e);
+ },
+
+ // private
+ onEndDrag : function(data, e){
+ },
+
+ // private - pin to cursor
+ autoOffset : function(x, y) {
+ this.setDelta(-12, -20);
+ },
+
+ destroy: function(){
+ Ext.dd.DragSource.superclass.destroy.call(this);
+ Ext.destroy(this.proxy);
+ }
+});/**
+ * @class Ext.dd.DropTarget
+ * @extends Ext.dd.DDTarget
+ * A simple class that provides the basic implementation needed to make any element a drop target that can have
+ * draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
+ * @constructor
+ * @param {Mixed} el The container element
+ * @param {Object} config
+ */
+Ext.dd.DropTarget = function(el, config){
+ this.el = Ext.get(el);
+
+ Ext.apply(this, config);
+
+ if(this.containerScroll){
+ Ext.dd.ScrollManager.register(this.el);
+ }
+
+ Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
+ {isTarget: true});
+
+};
+
+Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
+ /**
+ * @cfg {String} ddGroup
+ * A named drag drop group to which this object belongs. If a group is specified, then this object will only
+ * interact with other drag drop objects in the same group (defaults to undefined).
+ */
+ /**
+ * @cfg {String} overClass
+ * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
+ */
+ /**
+ * @cfg {String} dropAllowed
+ * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
+ */
+ dropAllowed : "x-dd-drop-ok",
+ /**
+ * @cfg {String} dropNotAllowed
+ * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
+ */
+ dropNotAllowed : "x-dd-drop-nodrop",
+
+ // private
+ isTarget : true,
+
+ // private
+ isNotifyTarget : true,
+
+ /**
+ * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
+ * target. This default implementation adds the CSS class specified by overClass (if any) to the drop element
+ * and returns the dropAllowed config value. This method should be overridden if drop validation is required.
+ * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Ext.dd.StatusProxy} can be updated
+ */
+ notifyEnter : function(dd, e, data){
+ if(this.overClass){
+ this.el.addClass(this.overClass);
+ }
+ return this.dropAllowed;
+ },
+
+ /**
+ * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
+ * This method will be called on every mouse movement while the drag source is over the drop target.
+ * This default implementation simply returns the dropAllowed config value.
+ * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {String} status The CSS class that communicates the drop status back to the source so that the
+ * underlying {@link Ext.dd.StatusProxy} can be updated
+ */
+ notifyOver : function(dd, e, data){
+ return this.dropAllowed;
+ },
+
+ /**
+ * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
+ * out of the target without dropping. This default implementation simply removes the CSS class specified by
+ * overClass (if any) from the drop element.
+ * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ */
+ notifyOut : function(dd, e, data){
+ if(this.overClass){
+ this.el.removeClass(this.overClass);
+ }
+ },
+
+ /**
+ * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
+ * been dropped on it. This method has no default implementation and returns false, so you must provide an
+ * implementation that does something to process the drop event and returns true so that the drag source's
+ * repair action does not run.
+ * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
+ * @param {Event} e The event
+ * @param {Object} data An object containing arbitrary data supplied by the drag source
+ * @return {Boolean} True if the drop was valid, else false
+ */
+ notifyDrop : function(dd, e, data){
+ return false;
+ }
+});/**
+ * @class Ext.dd.DragZone
+ * @extends Ext.dd.DragSource
+ * This class provides a container DD instance that allows dragging of multiple child source nodes.
+ *This class does not move the drag target nodes, but a proxy element which may contain + * any DOM structure you wish. The DOM element to show in the proxy is provided by either a + * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}
+ *If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some + * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class + * is the most efficient way to "activate" those nodes.
+ *By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}. + * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure + * the DragZone with an implementation of the {@link #getDragData} method which interrogates the passed + * mouse event to see if it has taken place within an element, or class of elements. This is easily done + * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a + * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following + * technique. Knowledge of the use of the DataView is required:
+myDataView.on('render', function(v) {
+ myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
+
+// On receipt of a mousedown event, see if it is within a DataView node.
+// Return a drag data object if so.
+ getDragData: function(e) {
+
+// Use the DataView's own itemSelector (a mandatory property) to
+// test if the mousedown is within one of the DataView's nodes.
+ var sourceEl = e.getTarget(v.itemSelector, 10);
+
+// If the mousedown is within a DataView node, clone the node to produce
+// a ddel element for use by the drag proxy. Also add application data
+// to the returned data object.
+ if (sourceEl) {
+ d = sourceEl.cloneNode(true);
+ d.id = Ext.id();
+ return {
+ ddel: d,
+ sourceEl: sourceEl,
+ repairXY: Ext.fly(sourceEl).getXY(),
+ sourceStore: v.store,
+ draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
+ }
+ }
+ },
+
+// Provide coordinates for the proxy to slide back to on failed drag.
+// This is the original XY coordinates of the draggable element captured
+// in the getDragData method.
+ getRepairXY: function() {
+ return this.dragData.repairXY;
+ }
+ });
+});This class provides a container DD instance that allows dropping on multiple child target nodes.
+ *By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}. + * However a simpler way to allow a DropZone to manage any number of target elements is to configure the + * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed + * mouse event to see if it has taken place within an element, or class of elements. This is easily done + * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a + * {@link Ext.DomQuery} selector.
+ *Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over + * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver}, + * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations + * of these methods to provide application-specific behaviour for these events to update both + * application state, and UI state.
+ *For example to make a GridPanel a cooperating target with the example illustrated in + * {@link Ext.dd.DragZone DragZone}, the following technique might be used:
+myGridPanel.on('render', function() {
+ myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
+
+// If the mouse is over a grid row, return that node. This is
+// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
+ getTargetFromEvent: function(e) {
+ return e.getTarget(myGridPanel.getView().rowSelector);
+ },
+
+// On entry into a target node, highlight that node.
+ onNodeEnter : function(target, dd, e, data){
+ Ext.fly(target).addClass('my-row-highlight-class');
+ },
+
+// On exit from a target node, unhighlight that node.
+ onNodeOut : function(target, dd, e, data){
+ Ext.fly(target).removeClass('my-row-highlight-class');
+ },
+
+// While over a target node, return the default drop allowed class which
+// places a "tick" icon into the drag proxy.
+ onNodeOver : function(target, dd, e, data){
+ return Ext.dd.DropZone.prototype.dropAllowed;
+ },
+
+// On node drop we can interrogate the target to find the underlying
+// application object that is the real target of the dragged data.
+// In this case, it is a Record in the GridPanel's Store.
+// We can use the data set up by the DragZone's getDragData method to read
+// any data we decided to attach in the DragZone's getDragData method.
+ onNodeDrop : function(target, dd, e, data){
+ var rowIndex = myGridPanel.getView().findRowIndex(target);
+ var r = myGridPanel.getStore().getAt(rowIndex);
+ Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
+ ' on Record id ' + r.id);
+ return true;
+ }
+ });
+}
+