extjs/build/examples/classic/core/spotlight-example.js

   1 Ext.Loader.setConfig({
   2     enabled: true
   3 });
   4
   5 Ext.require([
   6     'Ext.layout.container.Table',
   7     'Ext.ux.Spotlight'
   8 ]);
   9
  10 //Create a DemoPanel which is the base for each panel in the example
  11 Ext.define('DemoPanel', {
  12     extend: 'Ext.panel.Panel',
  13
  14     title: 'Demo Panel',
  15     frame: true,
  16     width: 200,
  17     height: 150,
  18     html: 'Some panel content goes here!',
  19     bodyPadding: 5,
  20
  21     /**
  22      * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument
  23      */
  24     toggle: function(on) {
  25         var btns = this.dockedItems.last(),
  26             btn = btns.items.first();
  27
  28         if (btn) {
  29             btn.setDisabled(!on);
  30         }
  31     }
  32 });
  33
  34 Ext.onReady(function() {
  35     //Create the spotlight component
  36     var spot = Ext.create('Ext.ux.Spotlight', {
  37         easing: 'easeOut',
  38         duration: 300
  39     });
  40
  41     var p1, p2, p3;
  42
  43     /**
  44      * Method which changes the spotlight to be active on a spefied panel
  45      */
  46     var updateSpot = function(id) {
  47         if (typeof id == 'string') {
  48             spot.show(id);
  49         } else if (!id && spot.active) {
  50             spot.hide();
  51         }
  52
  53         p1.toggle(id == p1.id);
  54         p2.toggle(id == p2.id);
  55         p3.toggle(id == p3.id);
  56     };
  57
  58     Ext.widget('container', {
  59         renderTo: Ext.getBody(),
  60         id: 'demo-ct',
  61         border: false,
  62
  63         layout: {
  64             type: 'table',
  65             columns: 3
  66         },
  67
  68         items: [
  69         p1 = Ext.create('DemoPanel', {
  70             id: 'panel1',
  71             buttons: [{
  72                 text: 'Next Panel',
  73                 disabled: true,
  74                 handler: function() {
  75                     updateSpot('panel2');
  76                 }
  77             }]
  78         }), p2 = Ext.create('DemoPanel', {
  79             id: 'panel2',
  80             buttons: [{
  81                 text: 'Next Panel',
  82                 disabled: true,
  83                 handler: function() {
  84                     updateSpot('panel3');
  85                 }
  86             }]
  87         }), p3 = Ext.create('DemoPanel', {
  88             id: 'panel3',
  89             buttons: [{
  90                 text: 'Done',
  91                 disabled: true,
  92                 handler: function() {
  93                     updateSpot(false);
  94                 }
  95             }]
  96         })]
  97     });
  98
  99     //The start button, which starts everything
 100     Ext.create('Ext.button.Button', {
 101         text: 'Start',
 102         renderTo: 'start-ct',
 103         handler: function() {
 104             updateSpot('panel1');
 105         }
 106     });
 107 });