docs/source/basic1.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">var ResizableExample = {\r
   9     init : function(){\r
  10         \r
  11         var basic = new Ext.Resizable('basic', {\r
  12                 width: 200,\r
  13                 height: 100,\r
  14                 minWidth:100,\r
  15                 minHeight:50\r
  16         });\r
  17         \r
  18         var animated = new Ext.Resizable('animated', {\r
  19                 width: 200,\r
  20                 pinned: true,\r
  21                 height: 100,\r
  22                 minWidth:100,\r
  23                 minHeight:50,\r
  24                 animate:true,\r
  25                 easing: 'backIn',\r
  26                 duration:.6\r
  27         });\r
  28         \r
  29         var wrapped = new Ext.Resizable('wrapped', {\r
  30             wrap:true,\r
  31             pinned:true,\r
  32             minWidth:50,\r
  33             minHeight: 50,\r
  34             preserveRatio: true\r
  35         });\r
  36         \r
  37         var transparent = new Ext.Resizable('transparent', {\r
  38             wrap:true,\r
  39             minWidth:50,\r
  40             minHeight: 50,\r
  41             preserveRatio: true,\r
  42             transparent:true\r
  43         });\r
  44         \r
  45         var custom = new Ext.Resizable('custom', {\r
  46             wrap:true,\r
  47             pinned:true,\r
  48             minWidth:50,\r
  49             minHeight: 50,\r
  50             preserveRatio: true,\r
  51             handles: 'all',\r
  52             draggable:true,\r
  53             dynamic:true\r
  54         });\r
  55         var customEl = custom.getEl();\r
  56         // move to the body to prevent overlap on my blog\r
  57         document.body.insertBefore(customEl.dom, document.body.firstChild);\r
  58         \r
  59         customEl.on('dblclick', function(){\r
  60             customEl.hide(true);\r
  61         });\r
  62         customEl.hide();\r
  63         \r
  64         Ext.get('showMe').on('click', function(){\r
  65             customEl.center();\r
  66             customEl.show(true);\r
  67         });\r
  68         \r
  69         var dwrapped = new Ext.Resizable('dwrapped', {\r
  70             wrap:true,\r
  71             pinned:true,\r
  72             width:450,\r
  73             height:150,\r
  74             minWidth:200,\r
  75             minHeight: 50,\r
  76             dynamic: true\r
  77         });\r
  78         \r
  79         var snap = new Ext.Resizable('snap', {\r
  80             pinned:true,\r
  81             width:250,\r
  82             height:100,\r
  83             handles: 'e',\r
  84             widthIncrement:50,\r
  85             minWidth: 50,\r
  86             dynamic: true\r
  87         });\r
  88     }\r
  89 };\r
  90 \r
  91 Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);</pre>    \r
  92 </body>\r
  93 </html>