Roo.util.Observable Roo.Resizable
Package: | Roo |
Defined In: | Roo/Resizable.js. |
Class: | Resizable |
Extends: | Roo.util.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
'hd' horizontal drag
'all' all
Here's an example showing the creation of a typical Resizable:
var resizer = new Roo.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);
Options | Defined By | |
---|---|---|
adjustments : Array/String
String "auto" or an array [width, height] with values to be added to the
resize operation's new size (defaults to [0, 0])
String "auto" or an array [width, height] with values to be added to the
resize operation's new size (defaults to [0, 0]) |
Roo.Resizable | |
animate : Boolean
True to animate the resize (not compatible with dynamic sizing, defaults to false)
True to animate the resize (not compatible with dynamic sizing, defaults to false)
|
Roo.Resizable | |
constrainTo : String/HTMLElement/Element
Constrain the resize to a particular element
Constrain the resize to a particular element
|
Roo.Resizable | |
disableTrackOver : Boolean
True to disable mouse tracking.
True to disable mouse tracking. This is only applied at config time. (defaults to false)
|
Roo.Resizable | |
draggable : Boolean
Convenience to initialize drag drop (defaults to false)
Convenience to initialize drag drop (defaults to false)
|
Roo.Resizable | |
duration : Number
Animation duration if animate = true (defaults to .35)
Animation duration if animate = true (defaults to .35)
|
Roo.Resizable | |
dynamic : Boolean
True to resize the element while dragging instead of using a proxy (defaults to false)
True to resize the element while dragging instead of using a proxy (defaults to false)
|
Roo.Resizable | |
easing : String
Animation easing if animate = true (defaults to 'easingOutStrong')
Animation easing if animate = true (defaults to 'easingOutStrong')
|
Roo.Resizable | |
enabled : Boolean
False to disable resizing (defaults to true)
False to disable resizing (defaults to true)
|
Roo.Resizable | |
handles : String
String consisting of the resize handles to display (defaults to undefined)
String consisting of the resize handles to display (defaults to undefined)
|
Roo.Resizable | |
height : Number
The height of the element in pixels (defaults to null)
The height of the element in pixels (defaults to null)
|
Roo.Resizable | |
heightIncrement : Number
The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
The increment to snap the height resize in pixels (dynamic must be true, defaults to 0)
|
Roo.Resizable | |
listeners : Object
list of events and functions to call for this object,
For example :
list of events and functions to call for this object,
For example :
|
Roo.util.Observable | |
maxHeight : Number
The maximum height for the element (defaults to 10000)
The maximum height for the element (defaults to 10000)
|
Roo.Resizable | |
maxWidth : Number
The maximum width for the element (defaults to 10000)
The maximum width for the element (defaults to 10000)
|
Roo.Resizable | |
minHeight : Number
The minimum height for the element (defaults to 5)
The minimum height for the element (defaults to 5)
|
Roo.Resizable | |
minWidth : Number
The minimum width for the element (defaults to 5)
The minimum width for the element (defaults to 5)
|
Roo.Resizable | |
minX : Number
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
The minimum allowed page X for the element (only used for west resizing, defaults to 0)
|
Roo.Resizable | |
minY : Number
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
The minimum allowed page Y for the element (only used for north resizing, defaults to 0)
|
Roo.Resizable | |
multiDirectional : Boolean
Deprecated.
Deprecated. The old style of adding multi-direction resize handles, deprecated
in favor of the handles config option (defaults to false) |
Roo.Resizable | |
pinned : Boolean
True to ensure that the resize handles are always visible, false to display them only when the
user mouses over the resizable borders.
True to ensure that the resize handles are always visible, false to display them only when the
user mouses over the resizable borders. This is only applied at config time. (defaults to false) |
Roo.Resizable | |
preserveRatio : Boolean
True to preserve the original ratio between height and width during resize (defaults to false)
True to preserve the original ratio between height and width during resize (defaults to false)
|
Roo.Resizable | |
resizeChild : Boolean/String/Element
True to resize the first child, or id/element to resize (defaults to false)
True to resize the first child, or id/element to resize (defaults to false)
|
Roo.Resizable | |
resizeRegion : Roo.lib.Region
Constrain the resize to a particular region
Constrain the resize to a particular region
|
Roo.Resizable | |
transparent : Boolean
True for transparent handles.
True for transparent handles. This is only applied at config time. (defaults to false)
|
Roo.Resizable | |
width : Number
The width of the element in pixels (defaults to null)
The width of the element in pixels (defaults to null)
|
Roo.Resizable | |
widthIncrement : Number
The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
The increment to snap the width resize in pixels (dynamic must be true, defaults to 0)
|
Roo.Resizable | |
wrap : Boolean
True to wrap an element with a div if needed (required for textareas and images, defaults to false)
True to wrap an element with a div if needed (required for textareas and images, defaults to false)
|
Roo.Resizable |
Method | Defined By | |
---|---|---|
addEvents
(Object object)
Used to define events on this Observable
Used to define events on this Observable
|
Roo.util.Observable | |
Appends an event handler to this component
Appends an event handler to this component
|
Roo.util.Observable | |
destroy
(Boolean removeEl)
Destroys this resizable.
Destroys this resizable. If the element was wrapped and
removeEl is not true then the element remains.
|
Roo.Resizable | |
Fires the specified event with the passed parameters (minus the event name).
|
Roo.util.Observable | |
getEl
()
:
Roo.Element
Returns the element this component is bound to.
Returns the element this component is bound to.
|
Roo.Resizable | |
getResizeChild
()
:
Roo.Element
Returns the resizeChild element (or null).
Returns the resizeChild element (or null).
|
Roo.Resizable | |
Roo.util.Observable | ||
Appends an event handler to this element (shorthand for addListener)
Appends an event handler to this element (shorthand for addListener)
|
Roo.util.Observable | |
purgeListeners
()
Removes all listeners for this object
Removes all listeners for this object
|
Roo.util.Observable | |
Roo.util.Observable | ||
Roo.Resizable | ||
Roo.util.Observable |
Event | Defined By | |
---|---|---|
beforeresize (Roo.Resizable this, Roo.EventObject e)
Fired before resize is allowed.
Fired before resize is allowed. Set enabled to false to cancel resize.
|
Roo.Resizable | |
Fired after a resize.
Fired after a resize.
|
Roo.Resizable | |
Fired a resizing.
Fired a resizing.
|
Roo.Resizable |