spotlight-example.js
2.49 KB
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('panel', {
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');
}
});
});