examples/resizable/basic.js

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