Ext version tested:

  • Ext 4.1.3

Browser versions tested against:
  • Chrome
  • IE9

DOCTYPE tested against:
  • <!DOCTYPE html>

  • 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:
<!DOCTYPE html>

    <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 () {