examples/core/spotlight-example.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.require(['Ext.panel.Panel', 'Ext.layout.container.Table']);
  16
  17 Ext.onReady(function() {
  18     //Create the spotlight component
  19     var spot = Ext.create('Ext.ux.Spotlight', {
  20         easing: 'easeOut',
  21         duration: 300
  22     });
  23
  24     //Create a DemoPanel which is the base for each panel in the example
  25     Ext.define('DemoPanel', {
  26         extend: 'Ext.panel.Panel',
  27
  28         title: 'Demo Panel',
  29         frame: true,
  30         width: 200,
  31         height: 150,
  32         html: 'Some panel content goes here!',
  33         bodyStyle: 'padding:5px;',
  34
  35         /**
  36          * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument
  37          */
  38         toggle: function(on) {
  39             var btns = this.dockedItems.last(),
  40                 btn = btns.items.first();
  41
  42             if (btn) {
  43                 btn.setDisabled(!on);
  44             }
  45         }
  46     });
  47
  48     var p1, p2, p3;
  49
  50     /**
  51      * Method which changes the spotlight to be active on a spefied panel
  52      */
  53     var updateSpot = function(id) {
  54         if (typeof id == 'string') {
  55             spot.show(id);
  56         } else if (!id && spot.active) {
  57             spot.hide();
  58         }
  59
  60         p1.toggle(id == p1.id);
  61         p2.toggle(id == p2.id);
  62         p3.toggle(id == p3.id);
  63     };
  64
  65     Ext.createWidget('panel', {
  66         renderTo: Ext.getBody(),
  67
  68         layout: 'table',
  69         id: 'demo-ct',
  70         border: false,
  71
  72         layoutConfig: {
  73             columns: 3
  74         },
  75
  76         items: [
  77         p1 = Ext.create('DemoPanel', {
  78             id: 'panel1',
  79             buttons: [{
  80                 text: 'Next Panel',
  81                 disabled: true,
  82                 handler: function() {
  83                     updateSpot('panel2');
  84                 }
  85             }]
  86         }), p2 = Ext.create('DemoPanel', {
  87             id: 'panel2',
  88             buttons: [{
  89                 text: 'Next Panel',
  90                 disabled: true,
  91                 handler: function() {
  92                     updateSpot('panel3');
  93                 }
  94             }]
  95         }), p3 = Ext.create('DemoPanel', {
  96             id: 'panel3',
  97             buttons: [{
  98                 text: 'Done',
  99                 disabled: true,
 100                 handler: function() {
 101                     updateSpot(false);
 102                 }
 103             }]
 104         })]
 105     });
 106
 107     //The start button, which starts everything
 108     Ext.create('Ext.button.Button', {
 109         text: 'Start',
 110         renderTo: 'start-ct',
 111         handler: function() {
 112             updateSpot('panel1');
 113         }
 114     });
 115 });
 116