X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/25ef3491bd9ae007ff1fc2b0d7943e6eaaccf775..c8256059947f3aa8f5b0a9a2acf55e2142bb4742:/docs/source/DragTracker.html?ds=sidebyside
diff --git a/docs/source/DragTracker.html b/docs/source/DragTracker.html
index 7dfe69d5..8b03dcc1 100644
--- a/docs/source/DragTracker.html
+++ b/docs/source/DragTracker.html
@@ -1,226 +1,257 @@
+
The source code
/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
+ * Ext JS Library 3.2.1
+ * Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
-/**
- * @class Ext.dd.DragTracker
- * @extends Ext.util.Observable
- */
-Ext.dd.DragTracker = function(config){
- Ext.apply(this, config);
- this.addEvents(
- /**
- * @event mousedown
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mousedown',
- /**
- * @event mouseup
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mouseup',
- /**
- * @event mousemove
- * @param {Object} this
- * @param {Object} e event object
- */
- 'mousemove',
- /**
- * @event dragstart
- * @param {Object} this
- * @param {Object} startXY the page coordinates of the event
- */
- 'dragstart',
- /**
- * @event dragend
- * @param {Object} this
- * @param {Object} e event object
- */
- 'dragend',
- /**
- * @event drag
- * @param {Object} this
- * @param {Object} e event object
- */
- 'drag'
- );
-
- this.dragRegion = new Ext.lib.Region(0,0,0,0);
-
- if(this.el){
- this.initEl(this.el);
- }
-}
-
-Ext.extend(Ext.dd.DragTracker, Ext.util.Observable, {
- /**
- * @cfg {Boolean} active
- * Defaults to false.
- */
- active: false,
- /**
- * @cfg {Number} tolerance
- * Defaults to 5.
- */
- tolerance: 5,
- /**
- * @cfg {Boolean/Number} autoStart
- * Defaults to false. Specify true to defer trigger start by 1000 ms.
- * Specify a Number for the number of milliseconds to defer trigger start.
- */
- autoStart: false,
-
- initEl: function(el){
- this.el = Ext.get(el);
- el.on('mousedown', this.onMouseDown, this,
- this.delegate ? {delegate: this.delegate} : undefined);
- },
-
- destroy : function(){
- this.el.un('mousedown', this.onMouseDown, this);
- },
-
- onMouseDown: function(e, target){
- if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
- this.startXY = this.lastXY = e.getXY();
- this.dragTarget = this.delegate ? target : this.el.dom;
- if(this.preventDefault !== false){
- e.preventDefault();
- }
- var doc = Ext.getDoc();
- doc.on('mouseup', this.onMouseUp, this);
- doc.on('mousemove', this.onMouseMove, this);
- doc.on('selectstart', this.stopSelect, this);
- if(this.autoStart){
- this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
- }
- }
- },
-
- onMouseMove: function(e, target){
- // HACK: IE hack to see if button was released outside of window. */
- if(this.active && Ext.isIE && !e.browserEvent.button){
- e.preventDefault();
- this.onMouseUp(e);
- return;
- }
-
- e.preventDefault();
- var xy = e.getXY(), s = this.startXY;
- this.lastXY = xy;
- if(!this.active){
- if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
- this.triggerStart();
- }else{
- return;
- }
- }
- this.fireEvent('mousemove', this, e);
- this.onDrag(e);
- this.fireEvent('drag', this, e);
- },
-
- onMouseUp: function(e){
- var doc = Ext.getDoc();
- doc.un('mousemove', this.onMouseMove, this);
- doc.un('mouseup', this.onMouseUp, this);
- doc.un('selectstart', this.stopSelect, this);
- e.preventDefault();
- this.clearStart();
- var wasActive = this.active;
- this.active = false;
- delete this.elRegion;
- this.fireEvent('mouseup', this, e);
- if(wasActive){
- this.onEnd(e);
- this.fireEvent('dragend', this, e);
- }
- },
-
- triggerStart: function(isTimer){
- this.clearStart();
- this.active = true;
- this.onStart(this.startXY);
- this.fireEvent('dragstart', this, this.startXY);
- },
-
- clearStart : function(){
- if(this.timer){
- clearTimeout(this.timer);
- delete this.timer;
- }
- },
-
- stopSelect : function(e){
- e.stopEvent();
- return false;
- },
-
- onBeforeStart : function(e){
-
- },
-
- onStart : function(xy){
-
- },
-
- onDrag : function(e){
-
- },
-
- onEnd : function(e){
-
- },
-
- getDragTarget : function(){
- return this.dragTarget;
- },
-
- getDragCt : function(){
- return this.el;
- },
-
- getXY : function(constrain){
- return constrain ?
- this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
- },
-
- getOffset : function(constrain){
- var xy = this.getXY(constrain);
- var s = this.startXY;
- return [s[0]-xy[0], s[1]-xy[1]];
- },
-
- constrainModes: {
- 'point' : function(xy){
-
- if(!this.elRegion){
- this.elRegion = this.getDragCt().getRegion();
- }
-
- var dr = this.dragRegion;
-
- dr.left = xy[0];
- dr.top = xy[1];
- dr.right = xy[0];
- dr.bottom = xy[1];
-
- dr.constrainTo(this.elRegion);
-
- return [dr.left, dr.top];
- }
- }
-});
+/**
+ * @class Ext.dd.DragTracker
+ * @extends Ext.util.Observable
+ * 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 {@link Ext.Slider}, 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 {@link Ext.Slider}'s initEvents function for an example implementation.
+ */
+Ext.dd.DragTracker = Ext.extend(Ext.util.Observable, {
+ /**
+ * @cfg {Boolean} active
+ * Defaults to false.
+ */
+ active: false,
+ /**
+ * @cfg {Number} tolerance
+ * Number of pixels the drag target must be moved before dragging is considered to have started. Defaults to 5.
+ */
+ tolerance: 5,
+ /**
+ * @cfg {Boolean/Number} autoStart
+ * Defaults to false. Specify true to defer trigger start by 1000 ms.
+ * Specify a Number for the number of milliseconds to defer trigger start.
+ */
+ autoStart: false,
+
+ constructor : function(config){
+ Ext.apply(this, config);
+ this.addEvents(
+ /**
+ * @event mousedown
+ * @param {Object} this
+ * @param {Object} e event object
+ */
+ 'mousedown',
+ /**
+ * @event mouseup
+ * @param {Object} this
+ * @param {Object} e event object
+ */
+ 'mouseup',
+ /**
+ * @event mousemove
+ * @param {Object} this
+ * @param {Object} e event object
+ */
+ 'mousemove',
+ /**
+ * @event dragstart
+ * @param {Object} this
+ * @param {Object} startXY the page coordinates of the event
+ */
+ 'dragstart',
+ /**
+ * @event dragend
+ * @param {Object} this
+ * @param {Object} e event object
+ */
+ 'dragend',
+ /**
+ * @event drag
+ * @param {Object} this
+ * @param {Object} e event object
+ */
+ 'drag'
+ );
+
+ this.dragRegion = new Ext.lib.Region(0,0,0,0);
+
+ if(this.el){
+ this.initEl(this.el);
+ }
+ Ext.dd.DragTracker.superclass.constructor.call(this, config);
+ },
+
+ initEl: function(el){
+ this.el = Ext.get(el);
+ el.on('mousedown', this.onMouseDown, this,
+ this.delegate ? {delegate: this.delegate} : undefined);
+ },
+
+ destroy : function(){
+ this.el.un('mousedown', this.onMouseDown, this);
+ },
+
+ onMouseDown: function(e, target){
+ if(this.fireEvent('mousedown', this, e) !== false && this.onBeforeStart(e) !== false){
+ this.startXY = this.lastXY = e.getXY();
+ this.dragTarget = this.delegate ? target : this.el.dom;
+ if(this.preventDefault !== false){
+ e.preventDefault();
+ }
+ var doc = Ext.getDoc();
+ doc.on('mouseup', this.onMouseUp, this);
+ doc.on('mousemove', this.onMouseMove, this);
+ doc.on('selectstart', this.stopSelect, this);
+ if(this.autoStart){
+ this.timer = this.triggerStart.defer(this.autoStart === true ? 1000 : this.autoStart, this);
+ }
+ }
+ },
+
+ onMouseMove: function(e, target){
+ // HACK: IE hack to see if button was released outside of window. */
+ if(this.active && Ext.isIE && !e.browserEvent.button){
+ e.preventDefault();
+ this.onMouseUp(e);
+ return;
+ }
+
+ e.preventDefault();
+ var xy = e.getXY(), s = this.startXY;
+ this.lastXY = xy;
+ if(!this.active){
+ if(Math.abs(s[0]-xy[0]) > this.tolerance || Math.abs(s[1]-xy[1]) > this.tolerance){
+ this.triggerStart();
+ }else{
+ return;
+ }
+ }
+ this.fireEvent('mousemove', this, e);
+ this.onDrag(e);
+ this.fireEvent('drag', this, e);
+ },
+
+ onMouseUp: function(e) {
+ var doc = Ext.getDoc();
+ doc.un('mousemove', this.onMouseMove, this);
+ doc.un('mouseup', this.onMouseUp, this);
+ doc.un('selectstart', this.stopSelect, this);
+ e.preventDefault();
+ this.clearStart();
+ var wasActive = this.active;
+ this.active = false;
+ delete this.elRegion;
+ this.fireEvent('mouseup', this, e);
+ if(wasActive){
+ this.onEnd(e);
+ this.fireEvent('dragend', this, e);
+ }
+ },
+
+ triggerStart: function(isTimer) {
+ this.clearStart();
+ this.active = true;
+ this.onStart(this.startXY);
+ this.fireEvent('dragstart', this, this.startXY);
+ },
+
+ clearStart : function() {
+ if(this.timer){
+ clearTimeout(this.timer);
+ delete this.timer;
+ }
+ },
+
+ stopSelect : function(e) {
+ e.stopEvent();
+ return false;
+ },
+
+ /**
+ * 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
+ * @param {Ext.EventObject} e The event object
+ */
+ onBeforeStart : function(e) {
+
+ },
+
+ /**
+ * 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)
+ * @param {Array} xy x and y co-ordinates of the original location of the tracked element
+ */
+ onStart : function(xy) {
+
+ },
+
+ /**
+ * Template method which should be overridden by each DragTracker instance. Called whenever a drag has been detected.
+ * @param {Ext.EventObject} e The event object
+ */
+ onDrag : function(e) {
+
+ },
+
+ /**
+ * 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)
+ * @param {Ext.EventObject} e The event object
+ */
+ onEnd : function(e) {
+
+ },
+
+ /**
+ * Returns the drag target
+ * @return {Ext.Element} The element currently being tracked
+ */
+ getDragTarget : function(){
+ return this.dragTarget;
+ },
+
+ getDragCt : function(){
+ return this.el;
+ },
+
+ getXY : function(constrain){
+ return constrain ?
+ this.constrainModes[constrain].call(this, this.lastXY) : this.lastXY;
+ },
+
+ getOffset : function(constrain){
+ var xy = this.getXY(constrain);
+ var s = this.startXY;
+ return [s[0]-xy[0], s[1]-xy[1]];
+ },
+
+ constrainModes: {
+ 'point' : function(xy){
+
+ if(!this.elRegion){
+ this.elRegion = this.getDragCt().getRegion();
+ }
+
+ var dr = this.dragRegion;
+
+ dr.left = xy[0];
+ dr.top = xy[1];
+ dr.right = xy[0];
+ dr.bottom = xy[1];
+
+ dr.constrainTo(this.elRegion);
+
+ return [dr.left, dr.top];
+ }
+ }
+});
\ No newline at end of file