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);