Clear Up
SharpKit Reference

DragTracker Class

A DragTracker listens for drag events on an Element and fires events at the start and end of the drag, as well as during the drag. This is useful for components such as Ext.slider.Multi, where there is an element that can be dragged around to change the Slider's value.

DragTracker provides a series of template methods that should be overridden to provide functionality in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd. See Ext.slider.Multi's initEvents function for an example implementation.

Namespace: Ext.dd

Base Types

Base Interfaces

Properties

Name Description
active Indicates whether the user is currently dragging this tracker. Defaults to: false
dragTarget The element being dragged. Only valid during drag operations. If the delegate option is used, this will be the delegate element which was mousedowned.
eventsSuspended Initial suspended call count. Incremented when suspendEvents is called, decremented when resumeEvents is called. Defaults to: 0
hasListeners This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the MVC EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event. The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:
if (this.hasListeners.foo) {
           this.fireEvent('foo', this, arg1);
           }
            
isObservable true in this class to identify an object as an instantiated Observable, or subclass thereof. Defaults to: true

Methods

Name Description
addEvents(object) Adds the specified events to the list of events which this Observable may fire.
addListener(object, Delegate, object, object) Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
addManagedListener(object, object, Delegate, object, object) Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
clearListeners() Removes all listeners for this object including the managed listeners
clearManagedListeners() Removes all managed listeners for this object.
continueFireEvent(JsString, object, object) Continue to fire event.
createRelayer(object, object) Creates an event handling function which refires the event from this object as the passed event name.
enableBubble(object) Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example:
  Ext.override(Ext.form.field.Base, {
            //  Add functionality to Field's initComponent to enable the change event to bubble
            initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
            this.enableBubble('change');
            }),
            //  We know that we want Field's events to bubble directly to the FormPanel.
            getBubbleTarget : function() {
            if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
            }
            return this.formPanel;
            }
            });
            var myForm = new Ext.formPanel({
            title: 'User Details',
            items: [{
            ...
            }],
            listeners: {
            change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
            }
            }
            });
            
fireEvent(JsString, Object[]) Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
getBubbleParent() Gets the bubbling parent for an Observable
getDragTarget() Returns the drag target. This is usually the DragTracker's encapsulating element. If the delegate option is being used, this may be a child element which matches the delegate selector.
getOffset(object) Returns the X, Y offset of the current mouse position from the mousedown point. This method may optionally constrain the real offset values, and returns a point coerced in one of two modes:
  • point The current mouse position is coerced into the constrainRegion and the resulting position is returned.
  • dragTarget The new Region of the dragTarget is calculated based upon the current mouse position, and then coerced into the constrainRegion. The returned mouse position is then adjusted by the same delta as was used to coerce the region.\
  • hasListener(JsString) Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.
    initEl(object) Initializes the DragTracker on a given element.
    mon(object, object, Delegate, object, object) Shorthand for addManagedListener. Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
    mun(object, object, Delegate, object) Shorthand for removeManagedListener. Removes listeners that were added by the mon method.
    on(object, Delegate, object, object) Shorthand for addListener. Appends an event handler to this object. For example:
    myGridPanel.on("mouseover", this.onMouseOver, this);
                
    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
    myGridPanel.on({
                cellClick: this.onCellClick,
                mouseover: this.onMouseOver,
                mouseout: this.onMouseOut,
                scope: this // Important. Ensure "this" is correct during handler execution
                });
                
    One can also specify options for each event handler separately:
    myGridPanel.on({
                cellClick: {fn: this.onCellClick, scope: this, single: true},
                mouseover: {fn: panel.onMouseOver, scope: panel}
                });
                
    Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
    myGridPanel.on({
                cellClick: {fn: 'onCellClick', scope: this, single: true},
                mouseover: {fn: 'onMouseOver', scope: panel}
                });
                
    onBeforeStart(EventObject) Template method which should be overridden by each DragTracker instance. Called when the user first clicks and holds the mouse button down. Return false to disallow the drag

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    onDrag(EventObject) Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    onEnd(EventObject) Template method which should be overridden by each DragTracker instance. Called when a drag operation has been completed (e.g. the user clicked and held the mouse down, dragged the element and then released the mouse button)

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    onStart(EventObject) Template method which should be overridden by each DragTracker instance. Called when a drag operation starts (e.g. the user has moved the tracked element beyond the specified tolerance)

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    prepareClass(Delegate) Prepares a given class for observable instances. This method is called when a class derives from this class or uses this class as a mixin.
    relayEvents(object, JsArray<T>, object) Relays selected events from the specified Observable as if the events were fired by this. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent:
    this.relayEvents(this.getStore(), ['load']);
                
    The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword.
    removeListener(JsString, Delegate, object) Removes an event handler.
    removeManagedListener(object, object, Delegate, object) Removes listeners that were added by the mon method.
    removeManagedListenerItem(bool, object) Remove a single managed listener item
    resumeEvents() Resumes firing events (see suspendEvents). If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
    suspendEvents(bool) Suspends the firing of all events. (see resumeEvents)
    un(JsString, Delegate, object) Shorthand for removeListener. Removes an event handler.

    Fields

    Name Description
    autoStart Specify true to defer trigger start by 1000 ms. Specify a Number for the number of milliseconds to defer trigger start. Defaults to: false
    constrainTo A Region (Or an element from which a Region measurement will be read) which is used to constrain the result of the getOffset call. This may be set any time during the DragTracker's lifecycle to set a dynamic constraining region.
    delegate A DomQuery selector which identifies child elements within the DragTracker's encapsulating Element which are the tracked elements. This limits tracking to only begin when the matching elements are mousedowned. This may also be a specific child element within the DragTracker's encapsulating element to use as the tracked element.
    listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
    new Ext.panel.Panel({
                width: 400,
                height: 200,
                dockedItems: [{
                xtype: 'toolbar'
                }],
                listeners: {
                click: {
                element: 'el', //bind to the underlying el property on the panel
                fn: function(){ console.log('click el'); }
                },
                dblclick: {
                element: 'body', //bind to the underlying body property on the panel
                fn: function(){ console.log('dblclick body'); }
                }
                }
                });
                
    overCls A CSS class to add to the DragTracker's target element when the element (or, if the delegate option is used, when a delegate element) is mouseovered. If the delegate option is used, these events fire only when a delegate element is entered of left.
    preventDefault Specify false to enable default actions on onMouseDown events. Defaults to: true
    stopEvent Specify true to stop the mousedown event from bubbling to outer listeners from the target element (or its delegates). Defaults to: false
    tolerance Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to: 5
    trackOver Set to true to fire mouseover and mouseout events when the mouse enters or leaves the target element. This is implicitly set when an overCls is specified. If the delegate option is used, these events fire only when a delegate element is entered of left. Defaults to: false
    © Copyright 2005-2011 SharpKit. All rights reserved.