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             minX : 0,
  87             handles: 'e w hd',
  88             widthIncrement:50,
  89             minWidth: 50,
  90             dynamic: true
  91         });
  92
  93
  94         var ids = ['box1', 'box2', 'box3'];
  95
  96         for(var i = 1; i < 4; i++){
  97             this['box'+i] = new Roo.Resizable('box'+i, {
  98                 wrap:true,
  99                 width: 150,
 100                 height: 100,
 101                 minWidth:20,
 102                 minHeight:20,
 103                 handles: 'se',
 104                 dynamic: true,
 105                 draggable: true
 106             });
 107         }
 108
 109 //        Roo.each(ids, function(id){
 110 //            if(ids[id]){
 111 //                Roo.get(id).appendTo(Roo.get('multi-box'));
 112 //            }
 113 //        });
 114
 115 //        this.multi = new Roo.Resizable('multi-box', {
 116 //
 117 //            width: 595,
 118 //            height: 200,
 119 //            minWidth:20,
 120 //            minHeight:20,
 121 //            handles: 'se',
 122 //            dynamic: true,
 123 //            draggable: true,
 124 //            resizeChild: false
 125 //
 126 //        });
 127     },
 128     multi : Roo.emptyFn,
 129
 130     group : function()
 131     {
 132         var ids = ['box1', 'box2', 'box3'];
 133
 134         for(var i = 1; i < 4; i++){
 135             this['box'+i].destroy();
 136         }
 137
 138
 139     }
 140 };
 141
 142 Roo.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);