docs/source/Scroller.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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-grid-Scroller'>/**
  19 </span> * @class Ext.grid.Scroller
  20  * @extends Ext.Component
  21  *
  22  * Docked in an Ext.grid.Panel, controls virtualized scrolling and synchronization
  23  * across different sections.
  24  *
  25  * @private
  26  */
  27 Ext.define('Ext.grid.Scroller', {
  28     extend: 'Ext.Component',
  29     alias: 'widget.gridscroller',
  30     weight: 110,
  31     cls: Ext.baseCSSPrefix + 'scroller',
  32     focusable: false,
  33
  34     renderTpl: ['&lt;div class=&quot;' + Ext.baseCSSPrefix + 'stretcher&quot;&gt;&lt;/div&gt;'],
  35
  36     initComponent: function() {
  37         var me       = this,
  38             dock     = me.dock,
  39             cls      = Ext.baseCSSPrefix + 'scroller-vertical',
  40             sizeProp = 'width',
  41             // Subtracting 2px would give us a perfect fit of the scroller
  42             // however, some browsers wont allow us to scroll content thats not
  43             // visible, therefore we use 1px.
  44             // Note: This 1px offset matches code in Ext.grid.ColumnLayout when
  45             // reserving room for the scrollbar
  46             scrollbarWidth = Ext.getScrollBarWidth() + (Ext.isIE ? 1 : -1);
  47
  48         me.offsets = {bottom: 0};
  49
  50         if (dock === 'top' || dock === 'bottom') {
  51             cls = Ext.baseCSSPrefix + 'scroller-horizontal';
  52             sizeProp = 'height';
  53         }
  54         me[sizeProp] = scrollbarWidth;
  55
  56         me.cls += (' ' + cls);
  57
  58         Ext.applyIf(me.renderSelectors, {
  59             stretchEl: '.' + Ext.baseCSSPrefix + 'stretcher'
  60         });
  61         me.callParent();
  62     },
  63
  64
  65     afterRender: function() {
  66         var me = this;
  67         me.callParent();
  68         me.ownerCt.on('afterlayout', me.onOwnerAfterLayout, me);
  69         me.mon(me.el, 'scroll', me.onElScroll, me);
  70         Ext.cache[me.el.id].skipGarbageCollection = true;
  71     },
  72
  73     getSizeCalculation: function() {
  74         var owner  = this.getPanel(),
  75             dock   = this.dock,
  76             elDom  = this.el.dom,
  77             width  = 1,
  78             height = 1,
  79             view, tbl;
  80
  81         if (dock === 'top' || dock === 'bottom') {
  82             // TODO: Must gravitate to a single region..
  83             // Horizontal scrolling only scrolls virtualized region
  84             var items  = owner.query('tableview'),
  85                 center = items[1] || items[0];
  86
  87             if (!center) {
  88                 return false;
  89             }
  90             // center is not guaranteed to have content, such as when there
  91             // are zero rows in the grid/tree. We read the width from the
  92             // headerCt instead.
  93             width = center.headerCt.getFullWidth();
  94
  95             if (Ext.isIEQuirks) {
  96                 width--;
  97             }
  98             // Account for the 1px removed in Scroller.
  99             width--;
 100         } else {
 101             view = owner.down('tableview:not([lockableInjected])');
 102             if (!view) {
 103                 return false;
 104             }
 105             tbl = view.el;
 106             if (!tbl) {
 107                 return false;
 108             }
 109
 110             // needs to also account for header and scroller (if still in picture)
 111             // should calculate from headerCt.
 112             height = tbl.dom.scrollHeight;
 113         }
 114         if (isNaN(width)) {
 115             width = 1;
 116         }
 117         if (isNaN(height)) {
 118             height = 1;
 119         }
 120         return {
 121             width: width,
 122             height: height
 123         };
 124     },
 125
 126     invalidate: function(firstPass) {
 127         if (!this.stretchEl || !this.ownerCt) {
 128             return;
 129         }
 130         var size  = this.getSizeCalculation(),
 131             elDom = this.el.dom;
 132         if (size) {
 133             this.stretchEl.setSize(size);
 134
 135             // BrowserBug: IE7
 136             // This makes the scroller enabled, when initially rendering.
 137             elDom.scrollTop = elDom.scrollTop;
 138         }
 139     },
 140
 141     onOwnerAfterLayout: function(owner, layout) {
 142         this.invalidate();
 143     },
 144
 145 <span id='Ext-grid-Scroller-method-setScrollTop'>    /**
 146 </span>     * Sets the scrollTop and constrains the value between 0 and max.
 147      * @param {Number} scrollTop
 148      * @return {Number} The resulting scrollTop value after being constrained
 149      */
 150     setScrollTop: function(scrollTop) {
 151         if (this.el) {
 152             var elDom = this.el.dom;
 153             return elDom.scrollTop = Ext.Number.constrain(scrollTop, 0, elDom.scrollHeight - elDom.clientHeight);
 154         }
 155     },
 156
 157 <span id='Ext-grid-Scroller-method-setScrollLeft'>    /**
 158 </span>     * Sets the scrollLeft and constrains the value between 0 and max.
 159      * @param {Number} scrollLeft
 160      * @return {Number} The resulting scrollLeft value after being constrained
 161      */
 162     setScrollLeft: function(scrollLeft) {
 163         if (this.el) {
 164             var elDom = this.el.dom;
 165             return elDom.scrollLeft = Ext.Number.constrain(scrollLeft, 0, elDom.scrollWidth - elDom.clientWidth);
 166         }
 167     },
 168
 169 <span id='Ext-grid-Scroller-method-scrollByDeltaY'>    /**
 170 </span>     * Scroll by deltaY
 171      * @param {Number} delta
 172      * @return {Number} The resulting scrollTop value
 173      */
 174     scrollByDeltaY: function(delta) {
 175         if (this.el) {
 176             var elDom = this.el.dom;
 177             return this.setScrollTop(elDom.scrollTop + delta);
 178         }
 179     },
 180
 181 <span id='Ext-grid-Scroller-method-scrollByDeltaX'>    /**
 182 </span>     * Scroll by deltaX
 183      * @param {Number} delta
 184      * @return {Number} The resulting scrollLeft value
 185      */
 186     scrollByDeltaX: function(delta) {
 187         if (this.el) {
 188             var elDom = this.el.dom;
 189             return this.setScrollLeft(elDom.scrollLeft + delta);
 190         }
 191     },
 192
 193
 194 <span id='Ext-grid-Scroller-method-scrollToTop'>    /**
 195 </span>     * Scroll to the top.
 196      */
 197     scrollToTop : function(){
 198         this.setScrollTop(0);
 199     },
 200
 201     // synchronize the scroller with the bound gridviews
 202     onElScroll: function(event, target) {
 203         this.fireEvent('bodyscroll', event, target);
 204     },
 205
 206     getPanel: function() {
 207         var me = this;
 208         if (!me.panel) {
 209             me.panel = this.up('[scrollerOwner]');
 210         }
 211         return me.panel;
 212     }
 213 });
 214
 215 </pre>
 216 </body>
 217 </html>