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.3.0
  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 handleWidth = 5,
  53             x = e.getPageX(),
  54             header = e.getTarget('em', 3, true);
  55         if(header){
  56             var region = header.getRegion(),
  57                 style = header.dom.style,
  58                 parentNode = header.dom.parentNode;
  59
  60             if(x - region.left <= handleWidth && parentNode != parentNode.parentNode.firstChild){
  61                 this.activeHd = Ext.get(parentNode.previousSibling.firstChild);
  62                 style.cursor = Ext.isWebKit ? 'e-resize' : 'col-resize';
  63             } else if(region.right - x <= handleWidth && parentNode != parentNode.parentNode.lastChild.previousSibling){
  64                 this.activeHd = header;
  65                 style.cursor = Ext.isWebKit ? 'w-resize' : 'col-resize';
  66             } else{
  67                 delete this.activeHd;
  68                 style.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
  80         var me = this,
  81             view = me.view,
  82             dragHeader = me.dragHd,
  83             x = me.tracker.getXY()[0];
  84
  85         me.proxy = view.el.createChild({cls:'x-list-resizer'});
  86         me.dragX = dragHeader.getX();
  87         me.headerIndex = view.findHeaderIndex(dragHeader);
  88
  89         me.headersDisabled = view.disableHeaders;
  90         view.disableHeaders = true;
  91
  92         me.proxy.setHeight(view.el.getHeight());
  93         me.proxy.setX(me.dragX);
  94         me.proxy.setWidth(x - me.dragX);
  95
  96         this.setBoundaries();
  97
  98     },
  99
 100     // Sets up the boundaries for the drag/drop operation
 101     setBoundaries: function(relativeX){
 102         var view = this.view,
 103             headerIndex = this.headerIndex,
 104             width = view.innerHd.getWidth(),
 105             relativeX = view.innerHd.getX(),
 106             minWidth = Math.ceil(width * this.minPct),
 107             maxWidth = width - minWidth,
 108             numColumns = view.columns.length,
 109             headers = view.innerHd.select('em', true),
 110             minX = minWidth + relativeX,
 111             maxX = maxWidth + relativeX,
 112             header;
 113
 114         if (numColumns == 2) {
 115             this.minX = minX;
 116             this.maxX = maxX;
 117         }else{
 118             header = headers.item(headerIndex + 2);
 119             this.minX = headers.item(headerIndex).getX() + minWidth;
 120             this.maxX = header ? header.getX() - minWidth : maxX;
 121             if (headerIndex == 0) {
 122                 // First
 123                 this.minX = minX;
 124             } else if (headerIndex == numColumns - 2) {
 125                 // Last
 126                 this.maxX = maxX;
 127             }
 128         }
 129     },
 130
 131     onDrag: function(e){
 132         var me = this,
 133             cursorX = me.tracker.getXY()[0].constrain(me.minX, me.maxX);
 134
 135         me.proxy.setWidth(cursorX - this.dragX);
 136     },
 137
 138     onEnd: function(e){
 139         /* calculate desired width by measuring proxy and then remove it */
 140         var newWidth = this.proxy.getWidth(),
 141             index = this.headerIndex,
 142             view = this.view,
 143             columns = view.columns,
 144             width = view.innerHd.getWidth(),
 145             newPercent = Math.ceil(newWidth * view.maxColumnWidth / width) / 100,
 146             disabled = this.headersDisabled,
 147             headerCol = columns[index],
 148             otherCol = columns[index + 1],
 149             totalPercent = headerCol.width + otherCol.width;
 150
 151         this.proxy.remove();
 152
 153         headerCol.width = newPercent;
 154         otherCol.width = totalPercent - newPercent;
 155
 156         delete this.dragHd;
 157         view.setHdWidths();
 158         view.refresh();
 159
 160         setTimeout(function(){
 161             view.disableHeaders = disabled;
 162         }, 100);
 163     }
 164 });
 165
 166 // Backwards compatibility alias
 167 Ext.ListView.ColumnResizer = Ext.list.ColumnResizer;</pre>
 168 </body>
 169 </html>