REQUIRED INFORMATION

Ext version tested:
  • Ext 4.1.3
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • Spotlight appears to be no working in the test case below (apologize if I used it wrong).
Steps to reproduce the problem:
  • Click the Spot button
The result that was expected:
  • The Spotlight effect
The result that occurs instead:
  • No the spotlight effect. But scrollbars appear.
Test Case:
Code:
<!DOCTYPE html>
<html>
<head>
    <title>Spotlight</title>

    <link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="../examples/ux/Spotlight.js"></script>

    <script type="text/javascript">
        Ext.onReady(function () {
           var spot = Ext.create("Ext.ux.Spotlight", {
                duration: 300,
                easing: "easeOut"
            });

            Ext.create("Ext.panel.Panel", {
                id: "panel1",
                renderTo: Ext.getBody(),
                height: 200,
                width: 200,
                html: "Some Content"
            });

            Ext.create("Ext.button.Button", {
                renderTo: Ext.getBody(),
                text: "Spot",                
                handler: function () {
                    spot.show("panel1");
                }
            });            
        });
    </script>
</head>
<body>

</body>
</html>