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         var aaa = function(){
  96             Roo.log(11)
  97         }
  98         for(var i = 1; i < 4; i++){
  99             this['box'+i] = new Roo.Resizable('box'+i, {
 100                 wrap:true,
 101                 width: 150,
 102                 height: 100,
 103                 minWidth:20,
 104                 minHeight:20,
 105                 handles: 'se',
 106                 dynamic: true,
 107                 draggable: true,
 108                 onMouseUp: function(){ Roo.log(1123) }
 109             });
 110         }
 111
 112 //        Roo.each(ids, function(id){
 113 //            if(ids[id]){
 114 //                Roo.get(id).appendTo(Roo.get('multi-box'));
 115 //            }
 116 //        });
 117
 118 //        this.multi = new Roo.Resizable('multi-box', {
 119 //
 120 //            width: 595,
 121 //            height: 200,
 122 //            minWidth:20,
 123 //            minHeight:20,
 124 //            handles: 'se',
 125 //            dynamic: true,
 126 //            draggable: true,
 127 //            resizeChild: false
 128 //
 129 //        });
 130     },
 131     multi : Roo.emptyFn,
 132
 133     group : function()
 134     {
 135         var ids = ['box1', 'box2', 'box3'];
 136
 137         for(var i = 1; i < 4; i++){
 138             this['box'+i].el.appendTo(Roo.get('grouping'));
 139         }
 140
 141         this.multi = new Roo.Resizable(Roo.get('grouping'), {
 142
 143             width: 595,
 144             height: 200,
 145             minWidth:20,
 146             minHeight:20,
 147             handles: 'se',
 148             dynamic: true,
 149             draggable: true,
 150             resizeChild: true
 151
 152         });
 153
 154     }
 155 };
 156
 157 Roo.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);