examples/resizable/basic.js

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