/ext-4.1.0_b3/examples/resizer/basic.js

 1Ext.require(['Ext.resizer.Resizer']);
 2
 3Ext.onReady(function() {
 4
 5    var basic = Ext.create('Ext.resizer.Resizer', {
 6        target: 'basic',
 7        width: 200,
 8        height: 100,
 9        minWidth: 100,
10        minHeight: 50
11    });
12
13    var wrapped = Ext.create('Ext.resizer.Resizer', {
14        target: 'wrapped',
15        pinned:true,
16        minWidth:50,
17        minHeight: 50,
18        preserveRatio: true
19    });
20
21    var snapping = Ext.create('Ext.resizer.Resizer', {
22        target: 'croix-de-fer',
23        width: 160,
24        height: 120,
25        minWidth: 160,
26        minHeight: 120,
27        preserveRatio: true,
28        heightIncrement: 20,
29        widthIncrement: 20
30    });
31
32    var transparent = Ext.create('Ext.resizer.Resizer', {
33        target: 'transparent',
34        minWidth:50,
35        minHeight: 50,
36        preserveRatio: true,
37        transparent:true
38    });
39
40    var custom = Ext.create('Ext.resizer.Resizer', {
41        target: 'custom',
42        pinned:true,
43        minWidth:50,
44        minHeight: 50,
45        preserveRatio: true,
46        handles: 'all',
47        dynamic: true
48    });
49
50    var customEl = custom.getEl();
51    // move to the body to prevent overlap on my blog
52    document.body.insertBefore(customEl.dom, document.body.firstChild);
53
54    customEl.on('dblclick', function(){
55        customEl.hide(true);
56    });
57    customEl.hide();
58
59    Ext.get('showMe').on('click', function(){
60        customEl.center();
61        customEl.show(true);
62    });
63
64    var dwrapped = Ext.create('Ext.resizer.Resizer', {
65        target: 'dwrapped',
66        pinned:true,
67        width:450,
68        height:200,
69        minWidth:200,
70        minHeight: 50,
71        dynamic: true
72    });
73});