These examples show how to apply a floating (default) and pinned Resizable component to a standard element.
-Note that the js is not minified so it is readable. See basic.js for the full source code.
- -
- Basic Example
- This is a basic as you get. To resize the box, position your mouse anywhere near the bottom,
- right or border right edge of the box. This example uses the default "floating" handles.
-
var basic = new Ext.Resizable('basic', {
- width: 200,
- height: 100,
- minWidth:100,
- minHeight:50
-});
- Wrapped Elements
- Some elements such as images and textareas don't allow child elements. In the past, you had
- to wrap these elements and set up a Resizable with resize child. Resizable will
- wrap the element, calculate adjustments for borders/padding and offset the handles for you. All you have to
- do is set "wrap:true". The manual way of specifying a "resizeChild" is still supported as well.
-
- Pinned Handles
- Notice this example has the resize handles "pinned". This is done by setting "pinned:true".
-
- Dynamic Sizing
- If you don't like the proxy resizing, you can also turn on dynamic sizing. Just set "dynamic:true".
-
- Here's a textarea that is wrapped, has pinned handles and has dynamic sizing turned on. -
-var dwrapped = new Ext.Resizable('dwrapped', {
- wrap:true,
- pinned:true,
- width:450,
- height:150,
- minWidth:200,
- minHeight: 50,
- dynamic: true
-});
-Preserve Ratio
- For some things like images, you will probably want to preserve the ratio of width to height. Just set preserveRatio:true.
-
-var wrapped = new Ext.Resizable('wrapped', {
- wrap:true,
- pinned:true,
- minWidth:50,
- minHeight: 50,
- preserveRatio: true
-});
-Transparent Handles
- If you just want the element to be resizable without any fancy handles, set transparent to true.
-
-var transparent = new Ext.Resizable('transparent', {
- wrap:true,
- minWidth:50,
- minHeight: 50,
- preserveRatio: true,
- transparent:true
-});
- Customizable Handles
- Resizable elements are resizable 8 ways. 8 way resizing for a static positioned element will cause the element to be positioned relative and taken out of the document flow. For resizing which adjusts the
- x and y of the element, the element should be positioned absolute. You can also control which handles are displayed by setting the "handles" attribute.
- The handles are styled using CSS so they can be customized to look however you would like them to.
-
- This image has 8 way resizing, custom handles, is draggable and 8 way preserved ratio (that wasn't easy!).
- Double click anywhere on the image to hide it when you are done.
-
-
-var custom = new Ext.Resizable('custom', {
- wrap:true,
- pinned:true,
- minWidth:50,
- minHeight: 50,
- preserveRatio: true,
- dynamic:true,
- handles: 'all', // shorthand for 'n s e w ne nw se sw'
- draggable:true
-});
- Snapping
- Resizable also supports basic snapping in increments.
-
var snap = new Ext.Resizable('snap', {
- pinned:true,
- width:250,
- height:100,
- handles: 'e',
- widthIncrement:50,
- minWidth: 50,
- dynamic: true
-});
-
- Animated Transitions
- Resize operations can also be animated. Animations support configurable easing and duration.
- Here's a very basic clone of the first element, but with animation turned on. I used a "backIn"
- easing and made it a little slower than default.
-
var animated = new Ext.Resizable('animated', {
- width: 200,
- height: 100,
- minWidth:100,
- minHeight:50,
- animate:true,
- easing: 'backIn',
- duration:.6
-});These examples show how to apply a floating (default) and pinned Resizable component to a standard element.
+Note that the js is not minified so it is readable. See basic.js for the full source code.
+ +
+ Basic Example
+ This is a basic as you get. To resize the box, position your mouse anywhere near the bottom,
+ right or border right edge of the box. This example uses the default "floating" handles.
+
var basic = new Ext.Resizable('basic', {
+ width: 200,
+ height: 100,
+ minWidth:100,
+ minHeight:50
+});
+ Wrapped Elements
+ Some elements such as images and textareas don't allow child elements. In the past, you had
+ to wrap these elements and set up a Resizable with resize child. Resizable will
+ wrap the element, calculate adjustments for borders/padding and offset the handles for you. All you have to
+ do is set "wrap:true". The manual way of specifying a "resizeChild" is still supported as well.
+
+ Pinned Handles
+ Notice this example has the resize handles "pinned". This is done by setting "pinned:true".
+
+ Dynamic Sizing
+ If you don't like the proxy resizing, you can also turn on dynamic sizing. Just set "dynamic:true".
+
+ Here's a textarea that is wrapped, has pinned handles and has dynamic sizing turned on. +
+var dwrapped = new Ext.Resizable('dwrapped', {
+ wrap:true,
+ pinned:true,
+ width:450,
+ height:150,
+ minWidth:200,
+ minHeight: 50,
+ dynamic: true
+});
+Preserve Ratio
+ For some things like images, you will probably want to preserve the ratio of width to height. Just set preserveRatio:true.
+
+var wrapped = new Ext.Resizable('wrapped', {
+ wrap:true,
+ pinned:true,
+ minWidth:50,
+ minHeight: 50,
+ preserveRatio: true
+});
+Transparent Handles
+ If you just want the element to be resizable without any fancy handles, set transparent to true.
+
+var transparent = new Ext.Resizable('transparent', {
+ wrap:true,
+ minWidth:50,
+ minHeight: 50,
+ preserveRatio: true,
+ transparent:true
+});
+ Customizable Handles
+ Resizable elements are resizable 8 ways. 8 way resizing for a static positioned element will cause the element to be positioned relative and taken out of the document flow. For resizing which adjusts the
+ x and y of the element, the element should be positioned absolute. You can also control which handles are displayed by setting the "handles" attribute.
+ The handles are styled using CSS so they can be customized to look however you would like them to.
+
+ This image has 8 way resizing, custom handles, is draggable and 8 way preserved ratio (that wasn't easy!).
+ Double click anywhere on the image to hide it when you are done.
+
+
+var custom = new Ext.Resizable('custom', {
+ wrap:true,
+ pinned:true,
+ minWidth:50,
+ minHeight: 50,
+ preserveRatio: true,
+ dynamic:true,
+ handles: 'all', // shorthand for 'n s e w ne nw se sw'
+ draggable:true
+});
+ Snapping
+ Resizable also supports basic snapping in increments.
+
var snap = new Ext.Resizable('snap', {
+ pinned:true,
+ width:250,
+ height:100,
+ handles: 'e',
+ widthIncrement:50,
+ minWidth: 50,
+ dynamic: true
+});
+
+ Animated Transitions
+ Resize operations can also be animated. Animations support configurable easing and duration.
+ Here's a very basic clone of the first element, but with animation turned on. I used a "backIn"
+ easing and made it a little slower than default.
+
var animated = new Ext.Resizable('animated', {
+ width: 200,
+ height: 100,
+ minWidth:100,
+ minHeight:50,
+ animate:true,
+ easing: 'backIn',
+ duration:.6
+});