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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
/*!
* Ext JS Library 3.0.3
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/
var ResizableExample = {
init : function(){
var basic = new Ext.Resizable('basic', {
width: 200,
height: 100,
minWidth:100,
minHeight:50
});
var animated = new Ext.Resizable('animated', {
width: 200,
pinned: true,
height: 100,
minWidth:100,
minHeight:50,
animate:true,
easing: 'backIn',
duration:.6
});
var wrapped = new Ext.Resizable('wrapped', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true
});
var transparent = new Ext.Resizable('transparent', {
wrap:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
transparent:true
});
var custom = new Ext.Resizable('custom', {
wrap:true,
pinned:true,
minWidth:50,
minHeight: 50,
preserveRatio: true,
handles: 'all',
draggable:true,
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 = new Ext.Resizable('dwrapped', {
wrap:true,
pinned:true,
width:450,
height:150,
minWidth:200,
minHeight: 50,
dynamic: true
});
var snap = new Ext.Resizable('snap', {
pinned:true,
width:250,
height:100,
handles: 'e',
widthIncrement:50,
minWidth: 50,
dynamic: true
});
}
};
Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
|
