X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/resizer/basic.html?ds=sidebyside diff --git a/examples/resizer/basic.html b/examples/resizer/basic.html new file mode 100644 index 00000000..2b9d61c9 --- /dev/null +++ b/examples/resizer/basic.html @@ -0,0 +1,118 @@ + + + + + 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 = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
+        target: 'basic',
+        width: 200,
+        height: 100,
+        minWidth:100,
+        minHeight:50
+});
+
+

+ Wrapped Elements
+ Some elements such as images and textareas don't allow child elements. Prior to Ext JS 3.x, you had + to wrap these elements and set up a Resizable with resize child. With Ext JS 3.x we made it a little + easier for you and all you had to do was set "wrap:true". Now with Ext JS 4.x we go a step further + and automatically detect if the element needs a wrap and wrap it for you. +

+ 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 (automatically), has pinned handles and has dynamic sizing turned on. +

+

+And look how simple the code is, even my grandma could write it. +
var dwrapped = Ext.create('Ext.resizer.Resizer', {
+    target: 'dwrapped',
+    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 = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
+    target: 'wrapped',
+    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 = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
+    target: 'transparent',
+    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 and preserved aspect ratio.
+ Double click anywhere on the image to hide it when you are done. +

+ +
+
var custom = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
+    target: 'custom',
+    pinned:true,
+    minWidth:50,
+    minHeight: 50,
+    preserveRatio: true,
+    dynamic:true,
+    handles: 'all' // shorthand for 'n s e w ne nw se sw'
+});
+ +

Images: graur codrin, Matt Banks, Lavoview (FreeDigitalPhotos.net)

+ + +