examples/core/spotlight-example.js

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