[OPEN] [#293] Spotlight Resizing Problem

  1. #1

    [OPEN] [#293] Spotlight Resizing Problem

    Hello everyone,

    I want to use the Spotlight component on a Panel in a Viewport but I am facing a problem when it comes to resizing the browser window. The problem can be reproduced using following sample code:

    <!DOCTYPE html>
    <html>
    <head>    
        <meta charset="utf-8" />
    </head>
    <body>
    
        @Html.X().ResourceManager()    
    
        @(Html.X().Spotlight().ID("MySpotlight").Easing(Easing.EaseInOut).Duration(0.3))
    
        @(Html.X().Viewport()
            .Layout(LayoutType.Fit)               
            .Items(                
                Html.X().Panel().Title("Outer Panel").Layout(LayoutType.Fit).Padding(5).Items(
                Html.X().Panel()        
                    .ID("MyPanel")                    
                    .Layout(LayoutType.Fit)        
                    .Title("Spotlighted Panel")
                    .TopBar(Html.X().Toolbar().Items(
                        Html.X().Button().Text("Spotlight On").OnClientClick("App.MySpotlight.show(Ext.getCmp('MyPanel'));"),
                        Html.X().Button().Text("Spotlight Off").OnClientClick("App.MySpotlight.hide();")
                    ))   
                )                 
            )
        )
    
    </body>
    </html>
    Steps to reproduce:
    1. Click the 'Spotlight On' button with the browser window not being maximized. Resize the window, the Spotlight adjusts with the size.
    2. Click the 'Spolight Off' button.
    3. Click the 'Spotlight On' button again with the browser window not being maximized. Resize the window and the Spotlight mask does not scale with window size.
    Last edited by Baidaly; Jul 04, 2013 at 8:43 PM. Reason: [OPEN] [#293]
  2. #2
    Hi @extnetuser,

    Thank you for the report.

    Please add this fix into the page's head.

    Fix
    Ext.ux.Spotlight.override({
        hide: function(callback, scope) {
            var me = this;
            
            Ext.EventManager.removeResizeListener(me.syncSize, me);
            me.applyBounds(me.animate, true);
            me.active = false;
        }  
    });
    Reported to Sencha.
    http://www.sencha.com/forum/showthread.php?267278
    Last edited by Daniil; Jul 04, 2013 at 1:45 PM.
  3. #3
    Thank you very much for the quick fix, Daniil.
  4. #4
    Hello!

    Sencha has open a bug. We have created an issue to track this defect: https://github.com/extnet/Ext.NET/issues/293
  5. #5
    The fix has been committed to SVN trunk. We will review our fix when Sencha fixes it itself.

Similar Threads

  1. [CLOSED] Spotlight + ComboBox
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 15, 2011, 5:57 PM
  2. resizing gridpanel problem
    By oseqat in forum 1.x Help
    Replies: 9
    Last Post: Jul 28, 2011, 2:01 PM
  3. [CLOSED] TableLayout resizing and Panel header visible problem
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 10, 2011, 9:27 AM
  4. [CLOSED] Problem with gridpanel column resizing in firefox and chrome
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 25
    Last Post: Sep 14, 2010, 2:10 PM
  5. Spotlight control
    By ohiohouse in forum 1.x Help
    Replies: 0
    Last Post: Jun 24, 2009, 4:49 PM

Tags for this Thread

Posting Permissions