examples/core/spotlight-example.js

   1 Ext.require(['Ext.panel.Panel', 'Ext.layout.container.Table']);
   2
   3 Ext.onReady(function() {
   4     //Create the spotlight component
   5     var spot = Ext.create('Ext.ux.Spotlight', {
   6         easing: 'easeOut',
   7         duration: 300
   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         bodyStyle: 'padding:5px;',
  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.items[1],
  26                 btn = btns.items.items[1];
  27
  28             if (btn) {
  29                 btn.setDisabled(!on);
  30             }
  31         }
  32     });
  33
  34     var p1, p2, p3;
  35
  36     /**
  37      * Method which changes the spotlight to be active on a spefied panel
  38      */
  39     var updateSpot = function(id) {
  40         if (typeof id == 'string') {
  41             spot.show(id);
  42         } else if (!id && spot.active) {
  43             spot.hide();
  44         }
  45
  46         p1.toggle(id == p1.id);
  47         p2.toggle(id == p2.id);
  48         p3.toggle(id == p3.id);
  49     };
  50
  51     Ext.createWidget('panel', {
  52         renderTo: Ext.getBody(),
  53
  54         layout: 'table',
  55         id: 'demo-ct',
  56         border: false,
  57
  58         layoutConfig: {
  59             columns: 3
  60         },
  61
  62         items: [
  63         p1 = Ext.create('DemoPanel', {
  64             id: 'panel1',
  65             buttons: [{
  66                 text: 'Next Panel',
  67                 disabled: true,
  68                 handler: function() {
  69                     updateSpot('panel2');
  70                 }
  71             }]
  72         }), p2 = Ext.create('DemoPanel', {
  73             id: 'panel2',
  74             buttons: [{
  75                 text: 'Next Panel',
  76                 disabled: true,
  77                 handler: function() {
  78                     updateSpot('panel3');
  79                 }
  80             }]
  81         }), p3 = Ext.create('DemoPanel', {
  82             id: 'panel3',
  83             buttons: [{
  84                 text: 'Done',
  85                 disabled: true,
  86                 handler: function() {
  87                     updateSpot(false);
  88                 }
  89             }]
  90         })]
  91     });
  92
  93     //The start button, which starts everything
  94     Ext.create('Ext.button.Button', {
  95         text: 'Start',
  96         renderTo: 'start-ct',
  97         handler: function() {
  98             updateSpot('panel1');
  99         }
 100     });
 101 });