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