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 @@ - -
- -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
-});
-
-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.
-
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.
-
-