| Package: | Ext | 
| Class: | Resizable | 
| Extends: | Observable | 
| Defined In: | Resizable.js | 
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);
| Method | Defined By | |
|---|---|---|
Resizable( String/HTMLElement/Ext.Element el, Object config ) | 
        Resizable | |
| Create a new resizable component | ||
addEvents( Object object ) : void | 
        Observable | |
| Used to define events on this Observable | ||
addListener( String eventName, Function handler, [Object scope], [Object options] ) : void | 
        Observable | |
| Appends an event handler to this component | ||
fireEvent( String eventName, Object... args ) : Boolean | 
        Observable | |
| Fires the specified event with the passed parameters (minus the event name). | ||
hasListener( String eventName ) : Boolean | 
        Observable | |
| Checks to see if this object has any listeners for a specified event | ||
on( String eventName, Function handler, [Object scope], [Object options] ) : void | 
        Observable | |
| Appends an event handler to this element (shorthand for addListener) | ||
| purgeListeners() : void | Observable | |
| Removes all listeners for this object | ||
removeListener( String eventName, Function handler, [Object scope] ) : void | 
        Observable | |
| Removes a listener | ||
un( String eventName, Function handler, [Object scope] ) : void | 
        Observable | |
| Removes a listener (shorthand for removeListener) | ||
| Config Options | Defined By | |
|---|---|---|
| adjustments : Array/String | Resizable | |
| String "auto" or an array [width, height] with values to be added to the resize operation's new size (defaults to [0,... | ||
| animate : Boolean | Resizable | |
| True to animate the resize (not compatible with dynamic sizing, defaults to false) | ||
| disableTrackOver : Boolean | Resizable | |
| True to disable mouse tracking. This is only applied at config time. (defaults to false) | ||
| draggable : Boolean | Resizable | |
| Convenience to initialize drag drop (defaults to false) | ||
| duration : Number | Resizable | |
| Animation duration if animate = true (defaults to .35) | ||
| dynamic : Boolean | Resizable | |
| True to resize the element while dragging instead of using a proxy (defaults to false) | ||
| easing : String | Resizable | |
| Animation easing if animate = true (defaults to 'easingOutStrong') | ||
| enabled : Boolean | Resizable | |
| False to disable resizing (defaults to true) | ||
| handles : String | Resizable | |
| String consisting of the resize handles to display (defaults to undefined) | ||
| height : Number | Resizable | |
| The height of the element in pixels (defaults to null) | ||
| heightIncrement : Number | Resizable | |
| The increment to snap the height resize in pixels (dynamic must be true, defaults to 0) | ||
| maxHeight : Number | Resizable | |
| The maximum height for the element (defaults to 10000) | ||
| maxWidth : Number | Resizable | |
| The maximum width for the element (defaults to 10000) | ||
| minHeight : Number | Resizable | |
| The minimum height for the element (defaults to 5) | ||
| minWidth : Number | Resizable | |
| The minimum width for the element (defaults to 5) | ||
| minX : Number | Resizable | |
| The minimum allowed page X for the element (only used for west resizing, defaults to 0) | ||
| minY : Number | Resizable | |
| The minimum allowed page Y for the element (only used for north resizing, defaults to 0) | ||
| multiDirectional : Boolean | Resizable | |
| Deprecated. The old style of adding multi-direction resize handles, deprecated in favor of the handles config option ... | ||
| pinned : Boolean | Resizable | |
| True to ensure that the resize handles are always visible, false to display them only when the user mouses over the r... | ||
| preserveRatio : Boolean | Resizable | |
| True to preserve the original ratio between height and width during resize (defaults to false) | ||
| resizeChild : Boolean/String/Element | Resizable | |
| True to resize the first child, or id/element to resize (defaults to false) | ||
| transparent : Boolean | Resizable | |
| True for transparent handles. This is only applied at config time. (defaults to false) | ||
| width : Number | Resizable | |
| The width of the element in pixels (defaults to null) | ||
| widthIncrement : Number | Resizable | |
| The increment to snap the width resize in pixels (dynamic must be true, defaults to 0) | ||
| wrap : Boolean | Resizable | |
| True to wrap an element with a div if needed (required for textareas and images, defaults to false) | ||
public function Resizable( String/HTMLElement/Ext.Element el, Object config )
                el : String/HTMLElement/Ext.Elementconfig : Objectpublic function addEvents( Object object )
                object : Objectvoidpublic function addListener( String eventName, Function handler, [Object scope], [Object options] )
                eventName : Stringhandler : Functionscope : Objectoptions : Object
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
		
el.on('click', this.onClick, this, {
 			single: true,
    		delay: 100,
    		forumId: 4
		});
Attaching multiple handlers in 1 call
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
el.on({
			'click': {
        		fn: this.onClick,
        		scope: this,
        		delay: 100
    		}, 
    		'mouseover': {
        		fn: this.onMouseOver,
        		scope: this
    		},
    		'mouseout': {
        		fn: this.onMouseOut,
        		scope: this
    		}
		});
Or a shorthand syntax which passes the same scope object to all handlers:
el.on({
			'click': this.onClick,
    		'mouseover': this.onMouseOver,
    		'mouseout': this.onMouseOut,
    		scope: this
		});voidpublic function fireEvent( String eventName, Object... args )
                eventName : Stringargs : Object...Booleanpublic function hasListener( String eventName )
                eventName : StringBooleanpublic function on( String eventName, Function handler, [Object scope], [Object options] )
                eventName : Stringhandler : Functionscope : Objectoptions : Objectvoidpublic function purgeListeners()
                voidpublic function removeListener( String eventName, Function handler, [Object scope] )
                eventName : Stringhandler : Functionscope : Objectvoidpublic function un( String eventName, Function handler, [Object scope] )
                eventName : Stringhandler : Functionscope : Objectvoidadjustments : Array/String
                animate : Boolean
                disableTrackOver : Boolean
                draggable : Boolean
                duration : Number
                dynamic : Boolean
                easing : String
                enabled : Boolean
                handles : String
                height : Number
                heightIncrement : Number
                maxHeight : Number
                maxWidth : Number
                minHeight : Number
                minWidth : Number
                minX : Number
                minY : Number
                multiDirectional : Boolean
                pinned : Boolean
                preserveRatio : Boolean
                resizeChild : Boolean/String/Element
                transparent : Boolean
                width : Number
                widthIncrement : Number
                wrap : Boolean