X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/d41dc04ad17d1d9125fb2cf72db2b4782dbe3a8c..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/resizable/basic.html diff --git a/examples/resizable/basic.html b/examples/resizable/basic.html deleted file mode 100644 index cd510842..00000000 --- a/examples/resizable/basic.html +++ /dev/null @@ -1,184 +0,0 @@ - - - -Resizable Examples - - - - - - - - - - - - - - - - - -

Resizable Examples

-

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. -

-
Resize Me!
-
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. -

-

-And look how simple the code is, even my grandma could write it. -
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
-});
-
-Warning: Snapping and preserveRatio conflict and can not be used together. -
-

- 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. -

-
Animate Me!
-
var animated = new Ext.Resizable('animated', {
-    width: 200,
-    height: 100,
-    minWidth:100,
-    minHeight:50,
-    animate:true,
-    easing: 'backIn',
-    duration:.6
-});
-Warning: for obvious reasons animate and dynamic resizing can not be used together. - -