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
  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

This class has no public properties.

Public Methods

Method Defined By

Public Events

This class has no public events.