examples/resizable/basic.js

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