docs/source/spotlight-example.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">Ext.onReady(function(){
   9
  10     var spot = new Ext.ux.Spotlight({
  11         easing: 'easeOut',
  12         duration: .3
  13     });
  14
  15     var DemoPanel = Ext.extend(Ext.Panel, {
  16         title: 'Demo Panel',
  17         frame: true,
  18         width: 200,
  19         height: 150,
  20         html: 'Some panel content goes here!',
  21         bodyStyle: 'padding:10px 15px;',
  22
  23         toggle: function(on){
  24             this.buttons[0].setDisabled(!on);
  25         }
  26     });
  27
  28     var p1, p2, p3;
  29     var updateSpot = function(id){
  30         if(typeof id == 'string'){
  31             spot.show(id);
  32         }else if (!id && spot.active){
  33             spot.hide();
  34         }
  35         p1.toggle(id==p1.id);
  36         p2.toggle(id==p2.id);
  37         p3.toggle(id==p3.id);
  38     };
  39
  40     new Ext.Panel({
  41         renderTo: Ext.getBody(),
  42         layout: 'table',
  43         id: 'demo-ct',
  44         border: false,
  45         layoutConfig: {
  46             columns: 3
  47         },
  48         items: [p1 = new DemoPanel({
  49             id: 'panel1',
  50             buttons: [{
  51                 text: 'Next Panel',
  52                 handler: updateSpot.createDelegate(this, ['panel2'])
  53             }]
  54         }),
  55         p2 = new DemoPanel({
  56             id: 'panel2',
  57             buttons: [{
  58                 text: 'Next Panel',
  59                 handler: updateSpot.createDelegate(this, ['panel3'])
  60             }]
  61         }),
  62         p3 = new DemoPanel({
  63             id: 'panel3',
  64             buttons: [{
  65                 text: 'Done',
  66                 handler: updateSpot.createDelegate(this, [false])
  67             }]
  68         })]
  69     });
  70
  71     new Ext.Button({
  72         text: 'Start',
  73         renderTo: 'start-ct',
  74         handler: updateSpot.createDelegate(this, ['panel1'])
  75     });
  76
  77     updateSpot(false);
  78 });</pre>    \r
  79 </body>\r
  80 </html>