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