Mega Code Archive
Create resizable area
<![CDATA[
<!--
/*!
* 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>
]]>