13693261870
2022-09-16 354b3dbfbffb3df45212a2a44dbbf48b4acc2594
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');
        }
    });
});