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

Class Ozone.dragAndDrop.WidgetDragAndDrop

Defined in: WidgetDragAndDrop.js.

var wdd = new Ozone.dragAndDrop.WidgetDragAndDrop({
                  widgetEventingController: this.widgetEventingController
              });

 //this.wdd is a initialized WidgetDragAndDrop object
 this.wdd.addCallback('dragStart',function() {
   //use this function to change styles or change state when a drag is initiated
   cmp.dragging = true;
   cmp.getView().scroller.addCls('ddOver');
 });

See:

addCallback

 //this.wdd is a initialized WidgetDragAndDrop object
 this.wdd.addCallback('dragStop',function() {
   //use this function to change styles or change state when a drag is stopped
   cmp.dragging = false;
   cmp.getView().scroller.removeCls('ddOver');
 });

See:

addCallback

 //this.wdd is a initialized WidgetDragAndDrop object
  this.wdd.addCallback('dropReceive',function(msg) {
     //msg.dragDropData contains the data - this example the data is a channel name that will be subscribed to
     this.subscribeToChannel(msg.dragDropData);
  }.bind(this));

See:

addCallback

//example dragStart handler which highlights an Ext Grid when a drag occurs
this.wdd.addCallback('dragStart', (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');
     }
 }).createDelegate(this));  //createDelegate is an Ext function which sets the scope

 //this.wdd is a initialized WidgetDragAndDrop object
  this.wdd.addCallback('dropReceive',owfdojo.hitch(this,function(msg) {
     //msg.dragDropData contains the data
     //this example the data is a channel name that will be subscribed to
     this.subscribeToChannel(msg.dragDropData);
  }));

Parameters:

{String} eventName

The event name.

{Function} cb

The function to execute as a callback.

See:

dragStart Event - the callback for the dragStart event is called with the same config object used in the doStartDrag function with the exception of the dragDropData and the dragZone properties.

dragStop Event - If the drag stopped in the same widget that started the drag the callback for dragStop will be called with the dropTarget HTML node otherwise the first argument will be null.

dropReceive Event - the callback for the dropReceive event is called for any drop that occurs on a widget. If one has multiple dropZones in a widget it is easier to use addDropZoneHandler

//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
//this.wdd is the WidgetDragAndDrop Object
this.wdd.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

See:

doStartDrag

 //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 != null && data != '') {
       this.wdd.doStartDrag({
           dragDropLabel: data,
           dragZone:  document.getElementById('dragZone'),
           dragDropGroup: 'location',  //extra property to pass along
           dragDropData: data
       });
     }
 });

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

var wdd = Ozone.dragAndDrop.WidgetDragAndDrop.getInstance({
                  widgetEventingController: this.widgetEventingController
              });

Parameters:

{Object} cfg

config object see below for properties

{Object} cfg.widgetEventingController Optional

The widgetEventingController

{Boolean} cfg.autoInit Optional

True to automatically call init(), False otherwise. The default is True if left undefined

{Object} cfg.callbacks Optional

Object with callbacks who's names match drag and drop events. Alternatively one could use the addCallback function

Requires:

owfdojo which is a custom version of dojo for OWF

Ozone.eventing.Widget for eventing

See:

addCallback

Parameters:

{Object} cfg Optional

config object

See:

constructor

 //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) {
     this.wdd.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) {
     this.wdd.setDropEnabled(false);
   }
 },this);

Parameters:

{Boolean} dropEnabled

true to enable a drop, false to indicate a unsuccessful drop