X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..refs/heads/master:/docs/source/DragZone.html diff --git a/docs/source/DragZone.html b/docs/source/DragZone.html index 63e0a199..3235aab6 100644 --- a/docs/source/DragZone.html +++ b/docs/source/DragZone.html @@ -1,34 +1,37 @@ + - + The source code - - + + + + - -
/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-
/** - * @class Ext.dd.DragZone + +
/**
+ * @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 + * <p>This class provides a container DD instance that allows dragging of multiple child source nodes.</p> + * <p>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}. + * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}</p> + * <p>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.view.View DataView}) then use of this class + * is the most efficient way to "activate" those nodes.</p> + * <p>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:


+ * technique. Knowledge of the use of the DataView is required:</p><pre><code>
 myDataView.on('render', function(v) {
     myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), {
 
@@ -51,7 +54,7 @@ myDataView.on('render', function(v) {
                     sourceEl: sourceEl,
                     repairXY: Ext.fly(sourceEl).getXY(),
                     sourceStore: v.store,
-                    draggedRecord: v.{@link Ext.DataView#getRecord getRecord}(sourceEl)
+                    draggedRecord: v.{@link Ext.view.View#getRecord getRecord}(sourceEl)
                 }
             }
         },
@@ -63,52 +66,53 @@ myDataView.on('render', function(v) {
             return this.dragData.repairXY;
         }
     });
-});
+});</code></pre> * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which * cooperates with this DragZone. - * @constructor - * @param {Mixed} el The container element - * @param {Object} config */ -Ext.dd.DragZone = Ext.extend(Ext.dd.DragSource, { - +Ext.define('Ext.dd.DragZone', { + + extend: 'Ext.dd.DragSource', + + /** + * Creates new DragZone. + * @param {String/HTMLElement/Ext.Element} el The container element or ID of it. + * @param {Object} config + */ constructor : function(el, config){ - Ext.dd.DragZone.superclass.constructor.call(this, el, config); - if(this.containerScroll){ + this.callParent([el, config]); + if (this.containerScroll) { Ext.dd.ScrollManager.register(this.el); } }, - -
/** - * This property contains the data representing the dragged object. This data is set up by the implementation - * of the {@link #getDragData} method. It must contain a ddel property, but can contain + + /** + * This property contains the data representing the dragged object. This data is set up by the implementation + * of the {@link #getDragData} method. It must contain a <tt>ddel</tt> property, but can contain * any other data according to the application's needs. * @type Object * @property dragData */ -
/** - * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager + + /** + * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager * for auto scrolling during drag operations. */ -
/** - * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair - * method after a failed drop (defaults to "c3daf9" - light blue) - */ -
/** - * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry} + /** + * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry} * for a valid target to drag based on the mouse down. Override this method * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned - * object has a "ddel" attribute (with an HTML Element) for other functions to work. - * @param {EventObject} e The mouse down event + * object has a "ddel" attribute (with an HTML Element) for other functions to work. + * @param {Event} e The mouse down event * @return {Object} The dragData */ getDragData : function(e){ return Ext.dd.Registry.getHandleFromEvent(e); }, - -
/** - * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the + + /** + * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the * this.dragData.ddel * @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 @@ -119,33 +123,35 @@ Ext.dd.DragZone = Ext.extend(Ext.dd.DragSource, { this.onStartDrag(x, y); return true; }, - -
/** - * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel + + /** + * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel */ afterRepair : function(){ - if(Ext.enableFx){ - Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9"); + var me = this; + if (Ext.enableFx) { + Ext.fly(me.dragData.ddel).highlight(me.repairHighlightColor); } - this.dragging = false; + me.dragging = false; }, -
/** - * Called before a repair of an invalid drop to get the XY to animate to. By default returns + /** + * Called before a repair of an invalid drop to get the XY to animate to. By default returns * the XY of this.dragData.ddel - * @param {EventObject} e The mouse up event - * @return {Array} The xy location (e.g. [100, 200]) + * @param {Event} e The mouse up event + * @return {Number[]} The xy location (e.g. [100, 200]) */ getRepairXY : function(e){ - return Ext.Element.fly(this.dragData.ddel).getXY(); + return Ext.Element.fly(this.dragData.ddel).getXY(); }, - + destroy : function(){ - Ext.dd.DragZone.superclass.destroy.call(this); - if(this.containerScroll){ + this.callParent(); + if (this.containerScroll) { Ext.dd.ScrollManager.unregister(this.el); } } -});
+}); +
- \ No newline at end of file +