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
: Objectvoid
public 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
});
void
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function hasListener( String eventName
)
eventName
: StringBoolean
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Objectvoid
public function purgeListeners()
void
public function removeListener( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
adjustments : 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