| heightIncrement : NumberThe increment to snap the height resize in pixels
+ 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|
| adjustments : Array/StringString 'auto' or an array [width, height] with values to be added to the
+resize operation's new size (defaults to [0,... String 'auto' or an array [width, height] with values to be added to the
+resize operation's new size (defaults to [0, 0]) | Resizable | | 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 0.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 | | handleCls : String A css class to add to each handle. Defaults to ''. | Resizable | | handles : StringString consisting of the resize handles to display (defaults to undefined).
+Specify either 'all' or any of 'n s e w n... String consisting of the resize handles to display (defaults to undefined).
+Specify either 'all' or any of 'n s e w ne nw se sw'. | Resizable | | height : Number The height of the element in pixels (defaults to null) | Resizable | | heightIncrement : NumberThe increment to snap the height resize in pixels
(only applies if dynamic==true ). Defaults to 0. | Resizable | | listeners : ObjectA config object containing one or more event handlers to be added to this
object during initialization. This should ... A config object containing one or more event handlers to be added to this
object during initialization. This should be a valid listeners config object as specified in the
@@ -87,19 +87,21 @@ Ext.DomObserver = Ext.extend(Object, {
typeAhead: true,
mode: 'local',
triggerAction: 'all'
-}); | Observable | | 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 x for the element (defaults to 0) | Resizable | | minY : Number The minimum x for the element (defaults to 0) | Resizable | | multiDirectional : Boolean Deprecated. Deprecated style of adding multi-direction resize handles. | Resizable | | pinned : BooleanTrue to ensure that the resize handles are always visible, false to display them only when the
-user mouses over the ... 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) | 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 : NumberThe increment to snap the width resize in pixels
-(only applies if dynamic==true ). Defaults to 0. | Resizable | | wrap : BooleanTrue to wrap an element with a div if needed (required for textareas and images, defaults to false)
-in favor of the ... True to wrap an element with a div if needed (required for textareas and images, defaults to false)
-in favor of the handles config option (defaults to false) | Resizable |
Public Properties|
| enabled : Boolean Writable. False if resizing is disabled. | Resizable | | proxy : Ext.Element.The proxy Element that is resized in place of the real Element during the resize operation.
-This may be queried usin... The proxy Element that is resized in place of the real Element during the resize operation.
-This may be queried using Ext.Element.getBox to provide the new area to resize to.
+}); | Observable | | 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 x for the element (defaults to 0) | Resizable | | minY : Number The minimum x for the element (defaults to 0) | Resizable | | multiDirectional : Boolean Deprecated. Deprecated style of adding multi-direction resize handles. | Resizable | | pinned : BooleanTrue to ensure that the resize handles are always visible, false to display them only when the
+user mouses over the r... 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) | 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 : NumberThe increment to snap the width resize in pixels
+(only applies if dynamic==true ). Defaults to 0. | Resizable | | wrap : BooleanTrue to wrap an element with a div if needed (required for textareas and images, defaults to false)
+in favor of the h... True to wrap an element with a div if needed (required for textareas and images, defaults to false)
+in favor of the handles config option (defaults to false) | Resizable |
Public Properties|
| enabled : Boolean Writable. False if resizing is disabled. | Resizable | | proxy : Ext.Element.The proxy Element that is resized in place of the real Element during the resize operation.
+This may be queried using... The proxy Element that is resized in place of the real Element during the resize operation.
+This may be queried using Ext.Element.getBox to provide the new area to resize to.
Read only. | Resizable |
Public Methods|
| Resizable( Mixed el , Object config )
- Create a new resizable component Create a new resizable component | Resizable | | addEvents( Object object )
+ Create a new resizable component Create a new resizable component | Resizable | | addEvents( Object|String o , string Optional. )
:
- voidUsed to define events on this Observable Used to define events on this Observable | Observable | | addListener( String eventName , Function handler , [Object scope ], [Object options ] )
+ voidAdds the specified events to the list of events which this Observable may fire. Adds the specified events to the list of events which this Observable may fire. | Observable | | addListener( String eventName , Function handler , [Object scope ], [Object options ] )
:
voidAppends an event handler to this object. Appends an event handler to this object. Parameters:eventName : StringThe name of the event to listen for. handler : FunctionThe method the event invokes. scope : Object(optional) The scope (this reference) in which the handler function is executed.
If omitted, defaults to the object which fired the event. options : Object(optional) An object containing handler configuration.
@@ -120,8 +122,8 @@ Using the options argument, it is possible to combine different types of listene
A delayed, one-time listener.
myDataView.on('click', this.onClick, this, {
- single: true,
- delay: 100
+single: true,
+delay: 100
});
Attaching multiple handlers in 1 call
@@ -129,34 +131,66 @@ The method also allows for a single argument to be passed which is a config obje
which specify multiple handlers.
myGridPanel.on({
- 'click' : {
- fn: this.onClick,
- scope: this,
- delay: 100
- },
- 'mouseover' : {
- fn: this.onMouseOver,
- scope: this
- },
- 'mouseout' : {
- fn: this.onMouseOut,
- scope: this
- }
+'click' : {
+ fn: this.onClick,
+ scope: this,
+ delay: 100
+},
+'mouseover' : {
+ fn: this.onMouseOver,
+ scope: this
+},
+'mouseout' : {
+ fn: this.onMouseOut,
+ scope: this
+}
});
Or a shorthand syntax:
myGridPanel.on({
- 'click' : this.onClick,
- 'mouseover' : this.onMouseOver,
- 'mouseout' : this.onMouseOut,
- scope: this
+'click' : this.onClick,
+'mouseover' : this.onMouseOver,
+'mouseout' : this.onMouseOut,
+ scope: this
});
Returns: | Observable | | destroy( [Boolean removeEl ] )
:
- voidDestroys this resizable. If the element was wrapped and
-removeEl is not true then the element remains. Destroys this resizable. If the element was wrapped and
-removeEl is not true then the element remains. | Resizable | | enableBubble( Object events )
+ voidDestroys this resizable. If the element was wrapped and
+removeEl is not true then the element remains. Destroys this resizable. If the element was wrapped and
+removeEl is not true then the element remains. | Resizable | | enableBubble( String/Array events )
:
- voidUsed to enable bubbling of events Used to enable bubbling of events | Observable | | fireEvent( String eventName , Object... args )
+ voidEnables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present.... Enables events fired by this Observable to bubble up an owner hierarchy by calling
+this.getBubbleTarget() if present. There is no implementation in the Observable base class.
+ This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default
+implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to
+access the required target more quickly.
+ Example: Ext.override(Ext.form.Field, {
+ // Add functionality to Field's initComponent to enable the change event to bubble
+ initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {
+ this.enableBubble('change');
+ }),
+
+ // We know that we want Field's events to bubble directly to the FormPanel.
+ getBubbleTarget : function() {
+ if (!this.formPanel) {
+ this.formPanel = this.findParentByType('form');
+ }
+ return this.formPanel;
+ }
+});
+
+var myForm = new Ext.formPanel({
+ title: 'User Details',
+ items: [{
+ ...
+ }],
+ listeners: {
+ change: function() {
+ // Title goes red if form has been modified.
+ myForm.header.setStyle('color', 'red');
+ }
+ }
+});
| Observable | | fireEvent( String eventName , Object... args )
:
BooleanFires the specified event with the passed parameters (minus the event name).
An event may be set to bubble up an Obse... | Observable | | resizeElement()
:
- voidPerforms resizing of the associated Element. This method is called internally by this
-class, and should not be calle... Performs resizing of the associated Element. This method is called internally by this
-class, and should not be called by user code.
- If a Resizable is being used to resize an Element which encapsulates a more complex UI
-component such as a Panel, this method may be overridden by specifying an implementation
-as a config option to provide appropriate behaviour at the end of the resize operation on
-mouseup, for example resizing the Panel, and relaying the Panel's content.
- The new area to be resized to is available by examining the state of the proxy
-Element. Example:
- new Ext.Panel({
- title: 'Resize me',
- x: 100,
- y: 100,
- renderTo: Ext.getBody(),
- floating: true,
- frame: true,
- width: 400,
- height: 200,
- listeners: {
- render: function(p) {
- new Ext.Resizable(p.getEl(), {
- handles: 'all',
- pinned: true,
- transparent: true,
- resizeElement: function() {
- var box = this.proxy.getBox();
- p.updateBox(box);
- if (p.layout) {
- p.doLayout();
- }
- return box;
- }
- });
- }
- }
+ voidPerforms resizing of the associated Element. This method is called internally by this
+class, and should not be called... Performs resizing of the associated Element. This method is called internally by this
+class, and should not be called by user code.
+ If a Resizable is being used to resize an Element which encapsulates a more complex UI
+component such as a Panel, this method may be overridden by specifying an implementation
+as a config option to provide appropriate behaviour at the end of the resize operation on
+mouseup, for example resizing the Panel, and relaying the Panel's content.
+ The new area to be resized to is available by examining the state of the proxy
+Element. Example:
+ new Ext.Panel({
+ title: 'Resize me',
+ x: 100,
+ y: 100,
+ renderTo: Ext.getBody(),
+ floating: true,
+ frame: true,
+ width: 400,
+ height: 200,
+ listeners: {
+ render: function(p) {
+ new Ext.Resizable(p.getEl(), {
+ handles: 'all',
+ pinned: true,
+ transparent: true,
+ resizeElement: function() {
+ var box = this.proxy.getBox();
+ p.updateBox(box);
+ if (p.layout) {
+ p.doLayout();
+ }
+ return box;
+ }
+ });
+ }
+ }
}).show();
| Resizable | | resizeTo( Number width , Number height )
:
voidPerform a manual resize and fires the 'resize' event. Perform a manual resize and fires the 'resize' event. Parameters:width : Numberheight : Number Returns: | Resizable | | resumeEvents()
|
|