add extjs 6.0.1 sources

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

Ext.Loader.setConfig({\r
    enabled: true\r
});\r
\r
Ext.require([\r
    'Ext.layout.container.Table',\r
    'Ext.ux.Spotlight'\r
]);\r
\r
//Create a DemoPanel which is the base for each panel in the example\r
Ext.define('DemoPanel', {\r
    extend: 'Ext.panel.Panel',\r
\r
    title: 'Demo Panel',\r
    frame: true,\r
    width: 200,\r
    height: 150,\r
    html: 'Some panel content goes here!',\r
    bodyPadding: 5,\r
\r
    /**\r
     * Custom method which toggles a Ext.Button for the current panel on/off depending on the only argument\r
     */\r
    toggle: function(on) {\r
        var btns = this.dockedItems.last(),\r
            btn = btns.items.first();\r
\r
        if (btn) {\r
            btn.setDisabled(!on);\r
        }\r
    }\r
});\r
\r
Ext.onReady(function() {\r
    //Create the spotlight component\r
    var spot = Ext.create('Ext.ux.Spotlight', {\r
        easing: 'easeOut',\r
        duration: 300\r
    });\r
\r
    var p1, p2, p3;\r
\r
    /**\r
     * Method which changes the spotlight to be active on a spefied panel\r
     */\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
\r
        p1.toggle(id == p1.id);\r
        p2.toggle(id == p2.id);\r
        p3.toggle(id == p3.id);\r
    };\r
\r
    Ext.widget('container', {\r
        renderTo: Ext.getBody(),\r
        id: 'demo-ct',\r
        border: false,\r
\r
        layout: {\r
            type: 'table',\r
            columns: 3\r
        },\r
\r
        items: [\r
        p1 = Ext.create('DemoPanel', {\r
            id: 'panel1',\r
            buttons: [{\r
                text: 'Next Panel',\r
                disabled: true,\r
                handler: function() {\r
                    updateSpot('panel2');\r
                }\r
            }]\r
        }), p2 = Ext.create('DemoPanel', {\r
            id: 'panel2',\r
            buttons: [{\r
                text: 'Next Panel',\r
                disabled: true,\r
                handler: function() {\r
                    updateSpot('panel3');\r
                }\r
            }]\r
        }), p3 = Ext.create('DemoPanel', {\r
            id: 'panel3',\r
            buttons: [{\r
                text: 'Done',\r
                disabled: true,\r
                handler: function() {\r
                    updateSpot(false);\r
                }\r
            }]\r
        })]\r
    });\r
\r
    //The start button, which starts everything\r
    Ext.create('Ext.button.Button', {\r
        text: 'Start',\r
        renderTo: 'start-ct',\r
        handler: function() {\r
            updateSpot('panel1');\r
        }\r
    });\r
});\r