Class Index | File Index

## Classes

- _global_
- OWF
- OWF.Chrome
- OWF.DragAndDrop
- OWF.Eventing
- OWF.Intents
- OWF.Lang
- OWF.Launcher
- OWF.Log
- OWF.Metrics
- OWF.Preferences
- OWF.RPC
- OWF.Util
- Ozone.chrome.WidgetChrome
- Ozone.dragAndDrop.WidgetDragAndDrop
- Ozone.eventing.Widget
- Ozone.eventing.WidgetProxy
- Ozone.lang
- Ozone.launcher.WidgetLauncher
- Ozone.launcher.WidgetLauncherUtils
- Ozone.log
- Ozone.metrics
- Ozone.pref.PrefServer
- Ozone.state.WidgetState
- Ozone.state.WidgetStateHandler
- Ozone.util
- Ozone.util.pageLoad

# Namespace OWF.DragAndDrop

Defined in: Widget.js.

Namespace Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| OWF.DragAndDrop The OWF.DragAndDrop object manages the drag and drop for an individual widget.

Method Summary
Method Attributes | Method Name and Description
--- | ---
<static> | OWF.DragAndDrop.addDropZoneHandler(cfg) Adds a new drop zone to be managed.
<static> | OWF.DragAndDrop.getDragStartData() Returns data sent when a drag was started
<static> | OWF.DragAndDrop.getDropEnabled() Returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)
<static> | OWF.DragAndDrop.isDragging() Returns whether a drag is in progress
<static> | OWF.DragAndDrop.onDragStart(callback, scope) Executes the callback passed when a drag starts in any widget.
<static> | OWF.DragAndDrop.onDragStop(callback, scope) Executes the callback passed when a drag stops in any widget.
<static> | OWF.DragAndDrop.onDrop(callback, scope) Executes the callback passed when a drop occurs in the widget.
<static> | OWF.DragAndDrop.setDropEnabled(dropEnabled) Toggles the dragIndicator to indicate successful or unsuccessful drop
<static> | OWF.DragAndDrop.setFlashWidgetId(id) Use this method to set flex dom element id, so that drag and drop can be enabled in flex widgets.
<static> | OWF.DragAndDrop.startDrag(cfg) Starts a drag.

Namespace Detail
OWF.DragAndDrop
The OWF.DragAndDrop object manages the drag and drop for an individual widget.
Method Detail
<static> OWF.DragAndDrop.addDropZoneHandler(cfg)
Adds a new drop zone to be managed. The handler function defined in the cfg object will be called when a drop occurs over a dom node which matches the id or the className or is equal to or a child of the dropTarget node

    //Example cfg Object
    {
    	id: 'mygrid-1',
    	className: 'mygridClass',
    	dropZone: document.getElementById('dropZone'),
    	handler: function(msg) {
    		//some code here to handle the msg and respond
    	}
    }

    //Example usage of addDropZoneHandler which handles a drop that occurs over an Ext Grid and inserts new data into
    //that grid based on the dragged data
    OWF.DragAndDrop.addDropZoneHandler({
    	//dom node of an Ext grid
    	dropZone:grid.getView().scroller.dom,

    	//this function is called only when a drop occurs over the grid (i.e. the mouse was released over the grid)
    	handler: (function(msg){

    		var store = grid.getStore();
    		var processedSelections = [];
    		var errorMsg = null;

    		//loop through msg.dragDropData which is an array and check for dupes versus the destination store
    		for (var i = 0; i < msg.dragDropData.length; i++) {
    			//get data for one possible new record in the dragDropData
    			var recData = msg.dragDropData[i];

    			//is it already in the dest Ext Store?
    			if (store.findExact('id',recData.id) >= 0) {
    				//found the record already in the store
    			}
    			else {
    				//add new record based on the dragDropData
    				var newRec = new store.recordType(recData);
    				//calling an external function to decide whether to add the new rec
    				var rs = displayPanel.validateRecordOnAdd(newRec);
    				if (rs.success) {
    					processedSelections.push(newRec);
    				}
    				else {
    					errorMsg = rs.msg;
    				}
    			}
    		}

    		if (errorMsg) {
    			Ext.Msg.alert('Error', errorMsg);
    		}

    		//actually insert into the store which adds it the new recs to the grid
    		if (processedSelections.length > 0) {
    			store.insert(0, processedSelections);
    		}

    }).createDelegate(grid)});   //createDelegate is an Ext function which sets the scope of the callback

Parameters:
{Object} cfg
  config object see below
{className} cfg.class
  class of the dropZone
{String} cfg.id
  Id of the dropZone
{Node} cfg.dropZone
  HTML node which represents the dropZone
{Function} cfg.handler
  function to be called when a drop occurs over the dropZone. A msg object will be passed in

<static> OWF.DragAndDrop.getDragStartData()
Returns data sent when a drag was started

<static> OWF.DragAndDrop.getDropEnabled()
Returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)

<static> OWF.DragAndDrop.isDragging()
Returns whether a drag is in progress

<static> OWF.DragAndDrop.onDragStart(callback, scope)
Executes the callback passed when a drag starts in any widget.

    //example callback, highlights an Ext Grid when a drag occurs
    OWF.DragAndDrop.onDragStart(function(sender, msg) {
    	//get the Ext Grid
    	var grid = this.getComponent(this.gridId);

    	//check custom dragDropGroup property to see if the drag is meant for this grid
    	//if so highlight the grid by adding the ddOver class
    	if (grid && msg != null && msg.dragDropGroup == 'users') {
    		grid.getView().scroller.addClass('ddOver');
    	}
    }, this);

Parameters:
{Function} callback
  The function to execute as a callback.
{Object} scope
  The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.onDragStop(callback, scope)
Executes the callback passed when a drag stops in any widget.

    OWF.DragAndDrop.onDragStop(function(sender, msg) {
    	// do something here
    }, this);

Parameters:
{Function} callback
  The function to execute as a callback.
{Object} scope
  The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.onDrop(callback, scope)
Executes the callback passed when a drop occurs in the widget. If one has multiple dropZones in a widget it is easier to use addDropZoneHandler

    OWF.DragAndDrop.onDrop(function(sender, msg) {
    	var data = msg.dragDropData;

    	// do something with the data here
    }, this);

Parameters:
{Function} callback
  The function to execute as a callback.
{Object} scope
  The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.setDropEnabled(dropEnabled)
Toggles the dragIndicator to indicate successful or unsuccessful drop

    //attach mouseover callback to a particular area. If the mouse is here allow a drop
    cmp.getView().scroller.on('mouseover',function(e,t,o) {
    	if (cmp.dragging) {
    		OWF.DragAndDrop.setDropEnabled(true);
    	}
    },this);

    //attach a mouse out callback to a particular area. If the mouse leaves disable drop
    cmp.getView().scroller.on('mouseout',function(e,t,o) {
    	if (cmp.dragging) {
    		OWF.DragAndDrop.setDropEnabled(false);
    	}
    },this);

Parameters:
{Boolean} dropEnabled
  true to enable a drop, false to indicate a unsuccessful drop

<static> OWF.DragAndDrop.setFlashWidgetId(id)
Use this method to set flex dom element id, so that drag and drop can be enabled in flex widgets.

Parameters:
{String} id
  dom element id of flex widget

<static> OWF.DragAndDrop.startDrag(cfg)
Starts a drag. The config object passed in describes the drag and contains the data to be passed to the drop.

    //add handler to text field for dragging
    owfdojo.connect(document.getElementById('dragSource'), 'onmousedown', this, function(e) {
    	e.preventDefault();
    	var data = document.getElementById('InputChannel').value;
    	if (data) {
    		OWF.DragAndDrop.startDrag({
    			dragDropLabel: data,
    			dragDropData: data,
    			dragZone:  document.getElementById('dragZone'),
    			dragDropGroup: 'location'  //extra property to pass along
    		});
    	}
    });

Parameters:
{Object} cfg
  config object see below
{String} cfg.dragDropLabel
  Name to be used as text for the dragDrop indicator
{Object} cfg.dragDropData
  Data to be sent on a successful drag and drop. This property is only sent to the successful recipient of the drag (the dropReceive event). It will not be sent for other events.
{Object} cfg.dragZone
  dom node which presents a dragZone which is associated with this drag. This property is only saved and used locally to the widget to identify whether a dragZone is in fact the node as a dropZone. It will not be sent to other events callbacks.
{Object} cfg.*
  other custom properties may be specified, these will be passed along to event handlers

Documentation generated by JsDoc Toolkit 2.3.2 on Fri Oct 05 2012 16:51:04 GMT-0400 (EDT)