docs/source/ColumnResizer.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.2.1
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.com/license
  14  */
  15 <div id="cls-Ext.list.ColumnResizer"></div>/**
  16  * @class Ext.list.ColumnResizer
  17  * @extends Ext.util.Observable
  18  * <p>Supporting Class for Ext.list.ListView</p>
  19  * @constructor
  20  * @param {Object} config
  21  */
  22 Ext.list.ColumnResizer = Ext.extend(Ext.util.Observable, {
  23     <div id="cfg-Ext.list.ColumnResizer-minPct"></div>/**
  24      * @cfg {Number} minPct The minimum percentage to allot for any column (defaults to <tt>.05</tt>)
  25      */
  26     minPct: .05,
  27
  28     constructor: function(config){
  29         Ext.apply(this, config);
  30         Ext.list.ColumnResizer.superclass.constructor.call(this);
  31     },
  32     init : function(listView){
  33         this.view = listView;
  34         listView.on('render', this.initEvents, this);
  35     },
  36
  37     initEvents : function(view){
  38         view.mon(view.innerHd, 'mousemove', this.handleHdMove, this);
  39         this.tracker = new Ext.dd.DragTracker({
  40             onBeforeStart: this.onBeforeStart.createDelegate(this),
  41             onStart: this.onStart.createDelegate(this),
  42             onDrag: this.onDrag.createDelegate(this),
  43             onEnd: this.onEnd.createDelegate(this),
  44             tolerance: 3,
  45             autoStart: 300
  46         });
  47         this.tracker.initEl(view.innerHd);
  48         view.on('beforedestroy', this.tracker.destroy, this.tracker);
  49     },
  50
  51     handleHdMove : function(e, t){
  52         var hw = 5,
  53             x = e.getPageX(),
  54             hd = e.getTarget('em', 3, true);
  55         if(hd){
  56             var r = hd.getRegion(),
  57                 ss = hd.dom.style,
  58                 pn = hd.dom.parentNode;
  59
  60             if(x - r.left <= hw && pn != pn.parentNode.firstChild){
  61                 this.activeHd = Ext.get(pn.previousSibling.firstChild);
  62                 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
  63             } else if(r.right - x <= hw && pn != pn.parentNode.lastChild.previousSibling){
  64                 this.activeHd = hd;
  65                 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
  66             } else{
  67                 delete this.activeHd;
  68                 ss.cursor = '';
  69             }
  70         }
  71     },
  72
  73     onBeforeStart : function(e){
  74         this.dragHd = this.activeHd;
  75         return !!this.dragHd;
  76     },
  77
  78     onStart: function(e){
  79         this.view.disableHeaders = true;
  80         this.proxy = this.view.el.createChild({cls:'x-list-resizer'});
  81         this.proxy.setHeight(this.view.el.getHeight());
  82
  83         var x = this.tracker.getXY()[0],
  84             w = this.view.innerHd.getWidth();
  85
  86         this.hdX = this.dragHd.getX();
  87         this.hdIndex = this.view.findHeaderIndex(this.dragHd);
  88
  89         this.proxy.setX(this.hdX);
  90         this.proxy.setWidth(x-this.hdX);
  91
  92         this.minWidth = w*this.minPct;
  93         this.maxWidth = w - (this.minWidth*(this.view.columns.length-1-this.hdIndex));
  94     },
  95
  96     onDrag: function(e){
  97         var cursorX = this.tracker.getXY()[0];
  98         this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
  99     },
 100
 101     onEnd: function(e){
 102         /* calculate desired width by measuring proxy and then remove it */
 103         var nw = this.proxy.getWidth();
 104         this.proxy.remove();
 105
 106         var index = this.hdIndex,
 107             vw = this.view,
 108             cs = vw.columns,
 109             len = cs.length,
 110             w = this.view.innerHd.getWidth(),
 111             minPct = this.minPct * 100,
 112             pct = Math.ceil((nw * vw.maxWidth) / w),
 113             diff = (cs[index].width * 100) - pct,
 114             eachItem = Math.floor(diff / (len-1-index)),
 115             mod = diff - (eachItem * (len-1-index));
 116
 117         for(var i = index+1; i < len; i++){
 118             var cw = (cs[i].width * 100) + eachItem,
 119                 ncw = Math.max(minPct, cw);
 120             if(cw != ncw){
 121                 mod += cw - ncw;
 122             }
 123             cs[i].width = ncw / 100;
 124         }
 125         cs[index].width = pct / 100;
 126         cs[index+1].width += (mod / 100);
 127         delete this.dragHd;
 128         vw.setHdWidths();
 129         vw.refresh();
 130         setTimeout(function(){
 131             vw.disableHeaders = false;
 132         }, 100);
 133     }
 134 });
 135
 136 // Backwards compatibility alias
 137 Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;</pre>
 138 </body>
 139 </html>