git.roojs.org Git - roojs1/blob - examples/resizable/basic.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11 var ResizableExample = {
  12     init : function(){
  13
  14         var basic = new Roo.Resizable('basic', {
  15                 width: 200,
  16                 height: 100,
  17                 minWidth:100,
  18                 minHeight:50
  19         });
  20
  21         var animated = new Roo.Resizable('animated', {
  22                 width: 200,
  23                 pinned: true,
  24                 height: 100,
  25                 minWidth:100,
  26                 minHeight:50,
  27                 animate:true,
  28                 easing: 'backIn',
  29                 duration:.6
  30         });
  31
  32         var wrapped = new Roo.Resizable('wrapped', {
  33             wrap:true,
  34             pinned:true,
  35             minWidth:50,
  36             minHeight: 50,
  37             preserveRatio: true
  38         });
  39
  40         var transparent = new Roo.Resizable('transparent', {
  41             wrap:true,
  42             minWidth:50,
  43             minHeight: 50,
  44             preserveRatio: true,
  45             transparent:true
  46         });
  47
  48         var custom = new Roo.Resizable('custom', {
  49             wrap:true,
  50             pinned:true,
  51             minWidth:50,
  52             minHeight: 50,
  53             preserveRatio: true,
  54             handles: 'all',
  55             draggable:true,
  56             dynamic:true
  57         });
  58         var customEl = custom.getEl();
  59         // move to the body to prevent overlap on my blog
  60         document.body.insertBefore(customEl.dom, document.body.firstChild);
  61
  62         customEl.on('dblclick', function(){
  63             customEl.hide(true);
  64         });
  65         customEl.hide();
  66
  67         Roo.get('showMe').on('click', function(){
  68             customEl.center();
  69             customEl.show(true);
  70         });
  71
  72         var dwrapped = new Roo.Resizable('dwrapped', {
  73             wrap:true,
  74             pinned:true,
  75             width:450,
  76             height:150,
  77             minWidth:200,
  78             minHeight: 50,
  79             dynamic: true
  80         });
  81
  82         var snap = new Roo.Resizable('snap', {
  83             pinned:true,
  84             width:250,
  85             height:100,
  86             handles: 'e',
  87             widthIncrement:50,
  88             minWidth: 50,
  89             dynamic: true
  90         });
  91     }
  92 };
  93
  94 Roo.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);