Properties Methods Events Config Options Direct Link
Observable
  Resizable

Class Ext.Resizable

Package:Ext
Defined In:Resizable.js
Class:Resizable
Extends:Observable

Applies drag handles to an element to make it resizable. The drag handles are inserted into the element and positioned absolute. Some elements, such as a textarea or image, don't support this. To overcome that, you can wrap the textarea in a div and set "resizeChild" to true (or to the id of the element), or set wrap:true in your config and the element will be wrapped for you automatically.

Here is the list of valid resize handles:

Value   Description
------  -------------------
 'n'     north
 's'     south
 'e'     east
 'w'     west
 'nw'    northwest
 'sw'    southwest
 'se'    southeast
 'ne'    northeast
 'all'   all

Here's an example showing the creation of a typical Resizable:

var resizer = new Ext.Resizable("element-id", {
    handles: 'all',
    minWidth: 200,
    minHeight: 100,
    maxWidth: 500,
    maxHeight: 400,
    pinned: true
});
resizer.on("resize", myHandler);

To hide a particular handle, set its display to none in CSS, or through script:
resizer.east.setDisplayed(false);

Config Options

Config Options Defined By
  animate : Boolean
True to animate the resize (not compatible with dynamic sizing, defaults to false)
Resizable
  constrainTo : Mixed
Constrain the resize to a particular element
Resizable
  disableTrackOver : Boolean
True to disable mouse tracking. This is only applied at config time. (defaults to false)
Resizable
  draggable : Boolean
Convenience to initialize drag drop (defaults to false)
Resizable
  duration : Number
Animation duration if animate = true (defaults to .35)
Resizable
  dynamic : Boolean
True to resize the element while dragging instead of using a proxy (defaults to false)
Resizable
  easing : String
Animation easing if animate = true (defaults to 'easingOutStrong')
Resizable
  enabled : Boolean
False to disable resizing (defaults to true)
Resizable
  handles : String
String consisting of the resize handles to display (defaults to undefined)
Resizable
  height : Number
The height of the element in pixels (defaults to null)
Resizable
  heightIncrement : Number
The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
Resizable
  maxHeight : Number
The maximum height for the element (defaults to 10000)
Resizable
  maxWidth : Number
The maximum width for the element (defaults to 10000)
Resizable
  minHeight : Number
The minimum height for the element (defaults to 5)
Resizable
  minWidth : Number
The minimum width for the element (defaults to 5)
Resizable
  minX : Number
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
Resizable
  minY : Number
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
Resizable
  preserveRatio : Boolean
True to preserve the original ratio between height and width during resize (defaults to false)
Resizable
  resizeChild : Boolean/String/Element
True to resize the first child, or id/element to resize (defaults to false)
Resizable
  resizeRegion : Ext.lib.Region
Constrain the resize to a particular region
Resizable
  transparent : Boolean
True for transparent handles. This is only applied at config time. (defaults to false)
Resizable
  width : Number
The width of the element in pixels (defaults to null)
Resizable
  widthIncrement : Number
The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
Resizable
  wrap : Boolean
True to wrap an element with a div if needed (required for textareas and images, defaults to false)
Resizable

Public Properties

Property Defined By

Public Methods

Method Defined By

Public Events

Event Defined By