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
| Ext.require(['Ext.draw.Text', 'Ext.slider.Single']);
| Ext.onReady(function() {
| Ext.create('Ext.draw.Text', {
| renderTo: Ext.get('text-ph'),
| padding: 20,
| height: 350,
| degrees: 45,
| text: 'With Ext JS 4.0 Drawing',
| textStyle: {
| fill: '#000',
| 'font-size': '18px',
| 'font-family': 'Arial'
| }
| });
|
| Ext.create('Ext.draw.Text', {
| renderTo: Ext.get('text-ph'),
| padding: 20,
| height: 350,
| degrees: 90,
| text: 'Creating a rotated Text component',
| textStyle: {
| fill: '#000',
| 'font-size': '18px',
| 'font-family': 'Arial'
| }
| });
|
| Ext.create('Ext.draw.Text', {
| renderTo: Ext.get('text-ph'),
| id: 'snappy',
| width: 200,
| height: 350,
| autoSize: false,
| viewBox: false,
| padding: 20,
| degrees: 315,
| text: 'Is a snap!',
| textStyle: {
| padding: 20,
| fill: '#000',
| 'font-size': '18px',
| 'font-family': 'Arial',
| y: 50
| }
| });
|
| Ext.create('Ext.slider.Single', {
| renderTo: Ext.get('slider-ph'),
| hideLabel: true,
| width: 400,
| minValue: 0,
| maxValue: 360,
| value: 315,
| listeners: {
| change: function(slider, value) {
| var sprite = Ext.getCmp('snappy').surface.items.first();
| sprite.setAttributes({
| rotation: {
| degrees: value
| }
| }, true);
| }
| }
| });
| });
|
|