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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
| Ext.Loader.setConfig({
| enabled: true
| });
| Ext.Loader.setPath('Ext.ux', '../ux');
|
| Ext.require([
| 'Ext.layout.container.Table',
| 'Ext.ux.Spotlight'
| ]);
|
| //Create a DemoPanel which is the base for each panel in the example
| Ext.define('DemoPanel', {
| extend: 'Ext.panel.Panel',
|
| title: 'Demo Panel',
| frame: true,
| width: 200,
| height: 150,
| html: 'Some panel content goes here!',
| bodyPadding: 5,
|
| /**
| * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument
| */
| toggle: function(on) {
| var btns = this.dockedItems.last(),
| btn = btns.items.first();
|
| if (btn) {
| btn.setDisabled(!on);
| }
| }
| });
|
| Ext.onReady(function() {
| //Create the spotlight component
| var spot = Ext.create('Ext.ux.Spotlight', {
| easing: 'easeOut',
| duration: 300
| });
|
| var p1, p2, p3;
|
| /**
| * Method which changes the spotlight to be active on a spefied panel
| */
| var updateSpot = function(id) {
| if (typeof id == 'string') {
| spot.show(id);
| } else if (!id && spot.active) {
| spot.hide();
| }
|
| p1.toggle(id == p1.id);
| p2.toggle(id == p2.id);
| p3.toggle(id == p3.id);
| };
|
| Ext.widget('container', {
| renderTo: Ext.getBody(),
| id: 'demo-ct',
| border: false,
|
| layout: {
| type: 'table',
| columns: 3
| },
|
| items: [
| p1 = Ext.create('DemoPanel', {
| id: 'panel1',
| buttons: [{
| text: 'Next Panel',
| disabled: true,
| handler: function() {
| updateSpot('panel2');
| }
| }]
| }), p2 = Ext.create('DemoPanel', {
| id: 'panel2',
| buttons: [{
| text: 'Next Panel',
| disabled: true,
| handler: function() {
| updateSpot('panel3');
| }
| }]
| }), p3 = Ext.create('DemoPanel', {
| id: 'panel3',
| buttons: [{
| text: 'Done',
| disabled: true,
| handler: function() {
| updateSpot(false);
| }
| }]
| })]
| });
|
| //The start button, which starts everything
| Ext.create('Ext.button.Button', {
| text: 'Start',
| renderTo: 'start-ct',
| handler: function() {
| updateSpot('panel1');
| }
| });
| });
|
|