examples/ux/treegrid/TreeGridColumnResizer.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.tree.ColumnResizer
   9  * @extends Ext.util.Observable
  10  */
  11 Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
  12     /**
  13      * @cfg {Number} minWidth The minimum width the column can be dragged to.
  14      * Defaults to <tt>14</tt>.
  15      */
  16     minWidth: 14,
  17
  18     constructor: function(config){
  19         Ext.apply(this, config);
  20         Ext.tree.ColumnResizer.superclass.constructor.call(this);
  21     },
  22
  23     init : function(tree){
  24         this.tree = tree;
  25         tree.on('render', this.initEvents, this);
  26     },
  27
  28     initEvents : function(tree){
  29         tree.mon(tree.innerHd, 'mousemove', this.handleHdMove, this);
  30         this.tracker = new Ext.dd.DragTracker({
  31             onBeforeStart: this.onBeforeStart.createDelegate(this),
  32             onStart: this.onStart.createDelegate(this),
  33             onDrag: this.onDrag.createDelegate(this),
  34             onEnd: this.onEnd.createDelegate(this),
  35             tolerance: 3,
  36             autoStart: 300
  37         });
  38         this.tracker.initEl(tree.innerHd);
  39         tree.on('beforedestroy', this.tracker.destroy, this.tracker);
  40     },
  41
  42     handleHdMove : function(e, t){
  43         var hw = 5,
  44             x = e.getPageX(),
  45             hd = e.getTarget('.x-treegrid-hd', 3, true);
  46
  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 && hd.dom !== pn.firstChild) {
  53                 var ps = hd.dom.previousSibling;
  54                 while(ps && Ext.fly(ps).hasClass('x-treegrid-hd-hidden')) {
  55                     ps = ps.previousSibling;
  56                 }
  57                 if(ps) {
  58                     this.activeHd = Ext.get(ps);
  59                                 ss.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
  60                 }
  61             } else if(r.right - x <= hw) {
  62                 var ns = hd.dom;
  63                 while(ns && Ext.fly(ns).hasClass('x-treegrid-hd-hidden')) {
  64                     ns = ns.previousSibling;
  65                 }
  66                 if(ns) {
  67                     this.activeHd = Ext.get(ns);
  68                                 ss.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
  69                 }
  70             } else{
  71                 delete this.activeHd;
  72                 ss.cursor = '';
  73             }
  74         }
  75     },
  76
  77     onBeforeStart : function(e){
  78         this.dragHd = this.activeHd;
  79         return !!this.dragHd;
  80     },
  81
  82     onStart : function(e){
  83         this.tree.headersDisabled = true;
  84         this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
  85         this.proxy.setHeight(this.tree.body.getHeight());
  86
  87         var x = this.tracker.getXY()[0];
  88
  89         this.hdX = this.dragHd.getX();
  90         this.hdIndex = this.tree.findHeaderIndex(this.dragHd);
  91
  92         this.proxy.setX(this.hdX);
  93         this.proxy.setWidth(x-this.hdX);
  94
  95         this.maxWidth = this.tree.outerCt.getWidth() - this.tree.innerBody.translatePoints(this.hdX).left;
  96     },
  97
  98     onDrag : function(e){
  99         var cursorX = this.tracker.getXY()[0];
 100         this.proxy.setWidth((cursorX-this.hdX).constrain(this.minWidth, this.maxWidth));
 101     },
 102
 103     onEnd : function(e){
 104         var nw = this.proxy.getWidth(),
 105             tree = this.tree;
 106
 107         this.proxy.remove();
 108         delete this.dragHd;
 109
 110         tree.columns[this.hdIndex].width = nw;
 111         tree.updateColumnWidths();
 112
 113         setTimeout(function(){
 114             tree.headersDisabled = false;
 115         }, 100);
 116     }
 117 });