Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / core / spotlight-example.js

diff --git a/examples/core/spotlight-example.js b/examples/core/spotlight-example.js
index 11e2219..2cfc695 100644 (file)
--- a/examples/core/spotlight-example.js
+++ b/examples/core/spotlight-example.js
@@ -1,79 +1,101 @@
-/*\r
- * Ext JS Library 2.2.1\r
- * Copyright(c) 2006-2009, Ext JS, LLC.\r
- * licensing@extjs.com\r
- * \r
- * http://extjs.com/license\r
- */\r
-\r
-Ext.onReady(function(){\r
-    \r
-    var spot = new Ext.Spotlight({\r
-        easing: 'easeOut',\r
-        duration: .3\r
-    });\r
-    \r
-    var DemoPanel = Ext.extend(Ext.Panel, {\r
-        title: 'Demo Panel',\r
-        frame: true,\r
-        width: 200,\r
-        height: 150,\r
-        html: 'Some panel content goes here!',\r
-        bodyStyle: 'padding:10px 15px;',\r
-        \r
-        toggle: function(on){\r
-            this.buttons[0].setDisabled(!on);\r
-        }\r
-    });\r
-    \r
-    var p1, p2, p3;\r
-    var updateSpot = function(id){\r
-        if(typeof id == 'string'){\r
-            spot.show(id);\r
-        }else if (!id && spot.active){\r
-            spot.hide();\r
-        }\r
-        p1.toggle(id==p1.id);\r
-        p2.toggle(id==p2.id);\r
-        p3.toggle(id==p3.id);\r
-    };\r
-    \r
-    new Ext.Panel({\r
-        renderTo: Ext.getBody(),\r
-        layout: 'table',\r
-        id: 'demo-ct',\r
-        border: false,\r
-        layoutConfig: {\r
-            columns: 3\r
-        },\r
-        items: [p1 = new DemoPanel({\r
-            id: 'panel1',\r
-            buttons: [{\r
-                text: 'Next Panel',\r
-                handler: updateSpot.createDelegate(this, ['panel2'])\r
-            }]\r
-        }),\r
-        p2 = new DemoPanel({\r
-            id: 'panel2',\r
-            buttons: [{\r
-                text: 'Next Panel',\r
-                handler: updateSpot.createDelegate(this, ['panel3'])\r
-            }]\r
-        }),\r
-        p3 = new DemoPanel({\r
-            id: 'panel3',\r
-            buttons: [{\r
-                text: 'Done',\r
-                handler: updateSpot.createDelegate(this, [false])\r
-            }]\r
-        })]\r
-    });\r
-    \r
-    new Ext.Button({\r
-        text: 'Start',\r
-        renderTo: 'start-ct',\r
-        handler: updateSpot.createDelegate(this, ['panel1'])\r
-    });\r
-    \r
-    updateSpot(false);\r
-});
\ No newline at end of file
+Ext.require(['Ext.panel.Panel', 'Ext.layout.container.Table']);
+
+Ext.onReady(function() {
+    //Create the spotlight component
+    var spot = Ext.create('Ext.ux.Spotlight', {
+        easing: 'easeOut',
+        duration: 300
+    });
+
+    //Create a DemoPanel which is the base for each panel in the example
+    Ext.define('DemoPanel', {
+        extend: 'Ext.panel.Panel',
+
+        title: 'Demo Panel',
+        frame: true,
+        width: 200,
+        height: 150,
+        html: 'Some panel content goes here!',
+        bodyStyle: 'padding:5px;',
+
+        /**
+         * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument
+         */
+        toggle: function(on) {
+            var btns = this.dockedItems.items[1],
+                btn = btns.items.items[1];
+
+            if (btn) {
+                btn.setDisabled(!on);
+            }
+        }
+    });
+
+    var p1, p2, p3;
+
+    /**
+     * Method which changes the spotlight to be active on a spefied panel
+     */
+    var updateSpot = function(id) {
+        if (typeof id == 'string') {
+            spot.show(id);
+        } else if (!id && spot.active) {
+            spot.hide();
+        }
+
+        p1.toggle(id == p1.id);
+        p2.toggle(id == p2.id);
+        p3.toggle(id == p3.id);
+    };
+
+    Ext.createWidget('panel', {
+        renderTo: Ext.getBody(),
+
+        layout: 'table',
+        id: 'demo-ct',
+        border: false,
+
+        layoutConfig: {
+            columns: 3
+        },
+
+        items: [
+        p1 = Ext.create('DemoPanel', {
+            id: 'panel1',
+            buttons: [{
+                text: 'Next Panel',
+                disabled: true,
+                handler: function() {
+                    updateSpot('panel2');
+                }
+            }]
+        }), p2 = Ext.create('DemoPanel', {
+            id: 'panel2',
+            buttons: [{
+                text: 'Next Panel',
+                disabled: true,
+                handler: function() {
+                    updateSpot('panel3');
+                }
+            }]
+        }), p3 = Ext.create('DemoPanel', {
+            id: 'panel3',
+            buttons: [{
+                text: 'Done',
+                disabled: true,
+                handler: function() {
+                    updateSpot(false);
+                }
+            }]
+        })]
+    });
+
+    //The start button, which starts everything
+    Ext.create('Ext.button.Button', {
+        text: 'Start',
+        renderTo: 'start-ct',
+        handler: function() {
+            updateSpot('panel1');
+        }
+    });
+});