PDA

View Full Version : [OPEN] [#293] Spotlight Resizing Problem



extnetuser
Jul 04, 2013, 1:02 PM
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.

Daniil
Jul 04, 2013, 1:37 PM
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

extnetuser
Jul 04, 2013, 4:37 PM
Thank you very much for the quick fix, Daniil.

Baidaly
Jul 04, 2013, 8:43 PM
Hello!

Sencha has open a bug. We have created an issue to track this defect: https://github.com/extnet/Ext.NET/issues/293

Daniil
Jul 05, 2013, 3:36 AM
The fix has been committed to SVN trunk. We will review our fix when Sencha fixes it itself.