examples/core/spotlight-example.js

   1 /*!
   2  * Ext JS Library 3.0.3
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.onReady(function(){
   8
   9     var spot = new Ext.ux.Spotlight({
  10         easing: 'easeOut',
  11         duration: .3
  12     });
  13
  14     var DemoPanel = Ext.extend(Ext.Panel, {
  15         title: 'Demo Panel',
  16         frame: true,
  17         width: 200,
  18         height: 150,
  19         html: 'Some panel content goes here!',
  20         bodyStyle: 'padding:10px 15px;',
  21
  22         toggle: function(on){
  23             this.buttons[0].setDisabled(!on);
  24         }
  25     });
  26
  27     var p1, p2, p3;
  28     var updateSpot = function(id){
  29         if(typeof id == 'string'){
  30             spot.show(id);
  31         }else if (!id && spot.active){
  32             spot.hide();
  33         }
  34         p1.toggle(id==p1.id);
  35         p2.toggle(id==p2.id);
  36         p3.toggle(id==p3.id);
  37     };
  38
  39     new Ext.Panel({
  40         renderTo: Ext.getBody(),
  41         layout: 'table',
  42         id: 'demo-ct',
  43         border: false,
  44         layoutConfig: {
  45             columns: 3
  46         },
  47         items: [p1 = new DemoPanel({
  48             id: 'panel1',
  49             buttons: [{
  50                 text: 'Next Panel',
  51                 handler: updateSpot.createDelegate(this, ['panel2'])
  52             }]
  53         }),
  54         p2 = new DemoPanel({
  55             id: 'panel2',
  56             buttons: [{
  57                 text: 'Next Panel',
  58                 handler: updateSpot.createDelegate(this, ['panel3'])
  59             }]
  60         }),
  61         p3 = new DemoPanel({
  62             id: 'panel3',
  63             buttons: [{
  64                 text: 'Done',
  65                 handler: updateSpot.createDelegate(this, [false])
  66             }]
  67         })]
  68     });
  69
  70     new Ext.Button({
  71         text: 'Start',
  72         renderTo: 'start-ct',
  73         handler: updateSpot.createDelegate(this, ['panel1'])
  74     });
  75
  76     updateSpot(false);
  77 });