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