src/widgets/list/ColumnResizer.js

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