docs/source/ScrollManager.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-dd-ScrollManager'>/**
  19 </span> * @class Ext.dd.ScrollManager
  20  * &lt;p&gt;Provides automatic scrolling of overflow regions in the page during drag operations.&lt;/p&gt;
  21  * &lt;p&gt;The ScrollManager configs will be used as the defaults for any scroll container registered with it,
  22  * but you can also override most of the configs per scroll container by adding a
  23  * &lt;tt&gt;ddScrollConfig&lt;/tt&gt; object to the target element that contains these properties: {@link #hthresh},
  24  * {@link #vthresh}, {@link #increment} and {@link #frequency}.  Example usage:
  25  * &lt;pre&gt;&lt;code&gt;
  26 var el = Ext.get('scroll-ct');
  27 el.ddScrollConfig = {
  28     vthresh: 50,
  29     hthresh: -1,
  30     frequency: 100,
  31     increment: 200
  32 };
  33 Ext.dd.ScrollManager.register(el);
  34 &lt;/code&gt;&lt;/pre&gt;
  35  * Note: This class is designed to be used in &quot;Point Mode
  36  * @singleton
  37  */
  38 Ext.define('Ext.dd.ScrollManager', {
  39     singleton: true,
  40     requires: [
  41         'Ext.dd.DragDropManager'
  42     ],
  43
  44     constructor: function() {
  45         var ddm = Ext.dd.DragDropManager;
  46         ddm.fireEvents = Ext.Function.createSequence(ddm.fireEvents, this.onFire, this);
  47         ddm.stopDrag = Ext.Function.createSequence(ddm.stopDrag, this.onStop, this);
  48         this.doScroll = Ext.Function.bind(this.doScroll, this);
  49         this.ddmInstance = ddm;
  50         this.els = {};
  51         this.dragEl = null;
  52         this.proc = {};
  53     },
  54
  55     onStop: function(e){
  56         var sm = Ext.dd.ScrollManager;
  57         sm.dragEl = null;
  58         sm.clearProc();
  59     },
  60
  61     triggerRefresh: function() {
  62         if (this.ddmInstance.dragCurrent) {
  63             this.ddmInstance.refreshCache(this.ddmInstance.dragCurrent.groups);
  64         }
  65     },
  66
  67     doScroll: function() {
  68         if (this.ddmInstance.dragCurrent) {
  69             var proc   = this.proc,
  70                 procEl = proc.el,
  71                 ddScrollConfig = proc.el.ddScrollConfig,
  72                 inc = ddScrollConfig ? ddScrollConfig.increment : this.increment;
  73
  74             if (!this.animate) {
  75                 if (procEl.scroll(proc.dir, inc)) {
  76                     this.triggerRefresh();
  77                 }
  78             } else {
  79                 procEl.scroll(proc.dir, inc, true, this.animDuration, this.triggerRefresh);
  80             }
  81         }
  82     },
  83
  84     clearProc: function() {
  85         var proc = this.proc;
  86         if (proc.id) {
  87             clearInterval(proc.id);
  88         }
  89         proc.id = 0;
  90         proc.el = null;
  91         proc.dir = &quot;&quot;;
  92     },
  93
  94     startProc: function(el, dir) {
  95         this.clearProc();
  96         this.proc.el = el;
  97         this.proc.dir = dir;
  98         var group = el.ddScrollConfig ? el.ddScrollConfig.ddGroup : undefined,
  99             freq  = (el.ddScrollConfig &amp;&amp; el.ddScrollConfig.frequency)
 100                   ? el.ddScrollConfig.frequency
 101                   : this.frequency;
 102
 103         if (group === undefined || this.ddmInstance.dragCurrent.ddGroup == group) {
 104             this.proc.id = setInterval(this.doScroll, freq);
 105         }
 106     },
 107
 108     onFire: function(e, isDrop) {
 109         if (isDrop || !this.ddmInstance.dragCurrent) {
 110             return;
 111         }
 112         if (!this.dragEl || this.dragEl != this.ddmInstance.dragCurrent) {
 113             this.dragEl = this.ddmInstance.dragCurrent;
 114             // refresh regions on drag start
 115             this.refreshCache();
 116         }
 117
 118         var xy = e.getXY(),
 119             pt = e.getPoint(),
 120             proc = this.proc,
 121             els = this.els;
 122
 123         for (var id in els) {
 124             var el = els[id], r = el._region;
 125             var c = el.ddScrollConfig ? el.ddScrollConfig : this;
 126             if (r &amp;&amp; r.contains(pt) &amp;&amp; el.isScrollable()) {
 127                 if (r.bottom - pt.y &lt;= c.vthresh) {
 128                     if(proc.el != el){
 129                         this.startProc(el, &quot;down&quot;);
 130                     }
 131                     return;
 132                 }else if (r.right - pt.x &lt;= c.hthresh) {
 133                     if (proc.el != el) {
 134                         this.startProc(el, &quot;left&quot;);
 135                     }
 136                     return;
 137                 } else if(pt.y - r.top &lt;= c.vthresh) {
 138                     if (proc.el != el) {
 139                         this.startProc(el, &quot;up&quot;);
 140                     }
 141                     return;
 142                 } else if(pt.x - r.left &lt;= c.hthresh) {
 143                     if (proc.el != el) {
 144                         this.startProc(el, &quot;right&quot;);
 145                     }
 146                     return;
 147                 }
 148             }
 149         }
 150         this.clearProc();
 151     },
 152
 153 <span id='Ext-dd-ScrollManager-method-register'>    /**
 154 </span>     * Registers new overflow element(s) to auto scroll
 155      * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
 156      * The id of or the element to be scrolled or an array of either
 157      */
 158     register : function(el){
 159         if (Ext.isArray(el)) {
 160             for(var i = 0, len = el.length; i &lt; len; i++) {
 161                     this.register(el[i]);
 162             }
 163         } else {
 164             el = Ext.get(el);
 165             this.els[el.id] = el;
 166         }
 167     },
 168
 169 <span id='Ext-dd-ScrollManager-method-unregister'>    /**
 170 </span>     * Unregisters overflow element(s) so they are no longer scrolled
 171      * @param {String/HTMLElement/Ext.Element/String[]/HTMLElement[]/Ext.Element[]} el
 172      * The id of or the element to be removed or an array of either
 173      */
 174     unregister : function(el){
 175         if(Ext.isArray(el)){
 176             for (var i = 0, len = el.length; i &lt; len; i++) {
 177                 this.unregister(el[i]);
 178             }
 179         }else{
 180             el = Ext.get(el);
 181             delete this.els[el.id];
 182         }
 183     },
 184
 185 <span id='Ext-dd-ScrollManager-property-vthresh'>    /**
 186 </span>     * The number of pixels from the top or bottom edge of a container the pointer needs to be to
 187      * trigger scrolling
 188      * @type Number
 189      */
 190     vthresh : 25,
 191 <span id='Ext-dd-ScrollManager-property-hthresh'>    /**
 192 </span>     * The number of pixels from the right or left edge of a container the pointer needs to be to
 193      * trigger scrolling
 194      * @type Number
 195      */
 196     hthresh : 25,
 197
 198 <span id='Ext-dd-ScrollManager-property-increment'>    /**
 199 </span>     * The number of pixels to scroll in each scroll increment
 200      * @type Number
 201      */
 202     increment : 100,
 203
 204 <span id='Ext-dd-ScrollManager-property-frequency'>    /**
 205 </span>     * The frequency of scrolls in milliseconds
 206      * @type Number
 207      */
 208     frequency : 500,
 209
 210 <span id='Ext-dd-ScrollManager-property-animate'>    /**
 211 </span>     * True to animate the scroll
 212      * @type Boolean
 213      */
 214     animate: true,
 215
 216 <span id='Ext-dd-ScrollManager-property-animDuration'>    /**
 217 </span>     * The animation duration in seconds - MUST BE less than Ext.dd.ScrollManager.frequency!
 218      * @type Number
 219      */
 220     animDuration: 0.4,
 221
 222 <span id='Ext-dd-ScrollManager-property-ddGroup'>    /**
 223 </span>     * The named drag drop {@link Ext.dd.DragSource#ddGroup group} to which this container belongs.
 224      * If a ddGroup is specified, then container scrolling will only occur when a dragged object is in the same ddGroup.
 225      * @type String
 226      */
 227     ddGroup: undefined,
 228
 229 <span id='Ext-dd-ScrollManager-method-refreshCache'>    /**
 230 </span>     * Manually trigger a cache refresh.
 231      */
 232     refreshCache : function(){
 233         var els = this.els,
 234             id;
 235         for (id in els) {
 236             if(typeof els[id] == 'object'){ // for people extending the object prototype
 237                 els[id]._region = els[id].getRegion();
 238             }
 239         }
 240     }
 241 });
 242 </pre>
 243 </body>
 244 </html>