examples/ux/PanelResizer.js

   1 /*!
   2  * Ext JS Library 3.2.2
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ux.PanelResizer = Ext.extend(Ext.util.Observable, {
   8     minHeight: 0,
   9     maxHeight:10000000,
  10
  11     constructor: function(config){
  12         Ext.apply(this, config);
  13         this.events = {};
  14         Ext.ux.PanelResizer.superclass.constructor.call(this, config);
  15     },
  16
  17     init : function(p){
  18         this.panel = p;
  19
  20         if(this.panel.elements.indexOf('footer')==-1){
  21             p.elements += ',footer';
  22         }
  23         p.on('render', this.onRender, this);
  24     },
  25
  26     onRender : function(p){
  27         this.handle = p.footer.createChild({cls:'x-panel-resize'});
  28
  29         this.tracker = new Ext.dd.DragTracker({
  30             onStart: this.onDragStart.createDelegate(this),
  31             onDrag: this.onDrag.createDelegate(this),
  32             onEnd: this.onDragEnd.createDelegate(this),
  33             tolerance: 3,
  34             autoStart: 300
  35         });
  36         this.tracker.initEl(this.handle);
  37         p.on('beforedestroy', this.tracker.destroy, this.tracker);
  38     },
  39
  40         // private
  41     onDragStart: function(e){
  42         this.dragging = true;
  43         this.startHeight = this.panel.el.getHeight();
  44         this.fireEvent('dragstart', this, e);
  45     },
  46
  47         // private
  48     onDrag: function(e){
  49         this.panel.setHeight((this.startHeight-this.tracker.getOffset()[1]).constrain(this.minHeight, this.maxHeight));
  50         this.fireEvent('drag', this, e);
  51     },
  52
  53         // private
  54     onDragEnd: function(e){
  55         this.dragging = false;
  56         this.fireEvent('dragend', this, e);
  57     }
  58 });
  59 Ext.preg('panelresizer', Ext.ux.PanelResizer);