Ext JS JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. Ext JS
  4. Create resizable area




Hello World Window




/*!
 * 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);


#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%;
}



Resizable Examples


These examples show how to apply a floating (default) and pinned Resizable component to a standard element.



    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!