Create resizable area
<!-- /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ --> <!-- Revised from demo code in ext3.0.0 --> <html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <script language="javascript" > /*! * Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */ var ResizableExample = { init : function(){ var basic = new Ext.Resizable('basic', { width: 200, height: 100, minWidth:100, minHeight:50 }); var animated = new Ext.Resizable('animated', { width: 200, pinned: true, height: 100, minWidth:100, minHeight:50, animate:true, easing: 'backIn', duration:.6 }); var wrapped = new Ext.Resizable('wrapped', { wrap:true, pinned:true, minWidth:50, minHeight: 50, preserveRatio: true }); var transparent = new Ext.Resizable('transparent', { wrap:true, minWidth:50, minHeight: 50, preserveRatio: true, transparent:true }); var custom = new Ext.Resizable('custom', { wrap:true, pinned:true, minWidth:50, minHeight: 50, preserveRatio: true, handles: 'all', draggable:true, dynamic:true }); var customEl = custom.getEl(); // move to the body to prevent overlap on my blog document.body.insertBefore(customEl.dom, document.body.firstChild); customEl.on('dblclick', function(){ customEl.hide(true); }); customEl.hide(); Ext.get('showMe').on('click', function(){ customEl.center(); customEl.show(true); }); var dwrapped = new Ext.Resizable('dwrapped', { wrap:true, pinned:true, width:450, height:150, minWidth:200, minHeight: 50, dynamic: true }); var snap = new Ext.Resizable('snap', { pinned:true, width:250, height:100, handles: 'e', widthIncrement:50, minWidth: 50, dynamic: true }); } }; Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true); </script> <style type="text/css"> #basic, #animated { border:1px solid #c3daf9; color:#1e4e8f; font:bold 14px tahoma,verdana,helvetica; text-align:center; padding-top:20px; } #snap { border:1px solid #c3daf9; overflow:hidden; } #custom { cursor:move; } #custom-rzwrap{ z-index: 100; } #custom-rzwrap .x-resizable-handle{ width:11px; height:11px; background:transparent url(ext-3.0.0/resources/images/default/sizer/square.gif) no-repeat; margin:0px; } #custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{ top:45%; } #custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{ left:45%; } </style> </head> <body> <h1>Resizable Examples</h1> <p>These examples show how to apply a floating (default) and pinned Resizable component to a standard element.</p> <p> <b>Basic Example</b><br /> 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. </p> <div id="basic">Resize Me!</div> </body> </html>