[CLOSED] Desktop quickStart menu stuck after close dialog window

I am using 4.8.3.

The issue can be reproduced with the attached code.
Steps to reproduce:
1, The Desktop StartMenu & quickStart menu all look good when app starts.
2, click on quickStart menu-> menu1-> Open Window, a dialog win pops up.
3, Close the dialog window.
4, Click on QuickStart menu (or Start menu), the first clicked menu opens up & never goes aways. In my real application, the menu items still display OK.

It seems like this behavior is related to the AlwaysOnTop setting on the Slid panel(?). It works fine if this config is removed. For our app, the slide panel is the application main menu that needs to show on top of any other desktop module windows when user moves the cursor to the right.

Please let me know if you need any additional info.

Thanks
-Susan

Code:

<%@ Page Language="C#" %> <!DOCTYPE html> <html> <head runat="server"> <title>Ext.NET Examples</title> <script> var initSlidePanel = function () { this.setHeight(Ext.net.Desktop.desktop.body.getHeight()); if (!this.windowListen) { this.windowListen = true; this.show(); this.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0]); Ext.on("resize", initSlidePanel, this); } }; </script> </head> <body> <ext:ResourceManager runat="server"> <Listeners> <WindowResize Handler="Ext.net.Bus.publish('App.Desktop.ready');" Buffer="500" /> </Listeners> </ext:ResourceManager> <ext:Desktop ID="Desktop1" runat="server"> <Modules> <ext:DesktopModule ModuleID="Hello" AutoRun="true"> <Window> <ext:Window runat="server" ID="GreetingWindow" Plain="true" Padding="10" Width="150" Height="100" Title="Greeting" CloseAction="Destroy" Maximizable="true" Minimizable="true"> <Content> Welcome to Ext.Net desktop! </Content> </ext:Window> </Window> </ext:DesktopModule> <ext:DesktopModule ModuleID="notepad"> <Shortcut Name="Notepad" IconCls="x-notepad-shortcut" SortIndex="2" /> <Launcher Text="Notepad" Icon="ApplicationForm" /> <Window> <ext:Window runat="server" Title="Notepad" Width="750" Height="400" Icon="ApplicationForm" AnimCollapse="false" Border="false" HideMode="Offsets" Layout="FitLayout" CloseAction="Destroy"> <Items> <ext:HtmlEditor runat="server" Text="Some <b>rich</b> <font color='red'>text</font> goes <u>here</u><br>Give it a try!" /> </Items> </ext:Window> </Window> </ext:DesktopModule> </Modules> <DesktopConfig ShortcutDragSelector="true"> <ShortcutDefaults IconCls="x-default-shortcut" /> <ContextMenu> <ext:Menu runat="server"> <Items> <ext:MenuItem runat="server" Text="Change Settings" /> <ext:MenuSeparator runat="server" /> </Items> </ext:Menu> </ContextMenu> </DesktopConfig> <StartMenu Title="Ext.Net Desktop" Icon="Application" Height="100"> <ToolConfig> <ext:Toolbar ID="StartMenuToolbar" runat="server" Width="40"> <Items> <ext:Button runat="server" Text="Settings" Icon="Cog" /> </Items> </ext:Toolbar> </ToolConfig> </StartMenu> <TaskBar QuickStartWidth="80" TrayWidth="125" StyleSpec="z-index: 99999" > <QuickStart> <ext:Toolbar runat="server"> <Items> <ext:Button runat="server" Text="Menu1" > <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem runat="server" Text="Show Window" Handler="App.Dialog1.show();" /> <ext:MenuItem runat="server" Text="test" /> </Items> </ext:Menu> </Menu> </ext:Button> <ext:Button runat="server" Text="Menu 2" > <Menu> <ext:Menu runat="server"> <Items> <ext:MenuItem runat="server" Text="item1" /> <ext:MenuItem runat="server" Text="item2" /> </Items> </ext:Menu> </Menu> </ext:Button> </Items> </ext:Toolbar> </QuickStart> <Tray> <ext:Toolbar runat="server"> <Items> <ext:Button ID="LangButton" runat="server" Text="EN" Cls="x-bold-text" MenuAlign="br-tr" ArrowVisible="false"> <Menu> <ext:Menu runat="server"> <Items> <ext:CheckMenuItem runat="server" Group="lang" Text="English" Checked="true" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('EN');}" /> <ext:CheckMenuItem runat="server" Group="lang" Text="French" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('FR');}" /> <ext:MenuSeparator runat="server" /> <ext:MenuItem runat="server" Text="Show the Language Bar" /> </Items> </ext:Menu> </Menu> </ext:Button> <ext:ToolbarFill runat="server" /> </Items> </ext:Toolbar> </Tray> </TaskBar> <Listeners> <Ready BroadcastOnBus="App.Desktop.ready" /> </Listeners> </ext:Desktop> <ext:Panel runat="server" Title="Slide panel" Frame="true" Width="250" Layout="AccordionLayout" Floating="true" Shadow = "false" AlwaysOnTop ="true" Hidden="true"> <Items> <ext:Panel runat="server" Title="Section 1" Icon="User" /> <ext:Panel runat="server" Title="Section 2" Icon="UserB" /> <ext:Panel runat="server" Title="Section 3" Icon="UserB" /> </Items> <MessageBusListeners> <ext:MessageBusListener Name="App.Desktop.ready" Fn="initSlidePanel" /> </MessageBusListeners> <Plugins> <ext:MouseDistanceSensor runat="server" Opacity="false" Threshold="5"> <Listeners> <Near Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tr-tr', [0, 0], true);" /> <Far Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0], true);" /> </Listeners> </ext:MouseDistanceSensor> </Plugins> </ext:Panel> <ext:Window runat="server" ID="Dialog1" Hidden = "true" Width=520 Height=600 Modal="true" Resizable ="true" Collapsible="true" CloseAction = "Hide" Maximizable="true" Html="test"> </ext:Window> ) </body> </html>

Hello Susan!

Thanks for the straightforward runnable test case!

It seems there are some fight going on for the spotlight there. It may be enough to convince the browser focus to go to the first open window in the desktop -- if there is any.

Try this in your test case:

1. Create this JavaScript function:

Code:

var focusFirstWindow = function() { console.log("meep"); var modules = App.Desktop1.getModules(); Ext.each(modules, function (mod) { if (Ext.isFunction(mod.window)) { var wnd = App[mod.window().id]; if (wnd) { if (!wnd.hidden) { wnd.focus(); return false; } } } }); }

2. Bind it to the troublesome window's Hide event. In other words, the Dialog1 window should have then the following listener block:

Code:

<Listeners> <Hide Fn="focusFirstWindow" /> </Listeners>

I am not certain this issue should be filed as a bug. You are mixing a fullscreen desktop with a standalone window; this although the slide panel is also a standalone component shown on top of the desktop.

Nevertheless, I believe it would be best to set up that Dialog1 window as a desktop module instead of a standalone window, for proper interaction with the desktop.

Hope this helps!

Thank you so much Fabricio. That works!

One thing I want to check with you:
Most of my grids are dynamically created(like your desktop.AddNewModule()), Somehow the focusFirstWindow() cannot detect those dynamic modules. Is Desktop1.getModules() not supposed to find all dynamic modules or I do not config it right? I created dynamic win using same code as your mvc desktop demo. (the webform demo is same)

I can save all dynamic modules to a separate var but want to make sure this is the right thing to do.
Thanks
-susan

Hello Susan!

You are right, the way I provided to fetch list of modules returns but a static, initial list of modules; and even if you go down to get the window from the current/raw list of modules from App.Desktop1.modules, you can miss the window itself returned from its window() method.

I found a better way to traverse the list of open windows via the tileWindows() method implementation; it seems more objective and reliable to, instead, call for the static Ext.net.Desktop.desktop.windows property, as it will match any actual window bound to the taskbar and in my tests returned the windows reliably.

Using this approach, the javascript handler to focus the first window could be just:

Code:

var focusFirstWindow = function() { var firstWindow = Ext.net.Desktop.desktop.windows.first(); if (firstWindow) { firstWindow.focus(); } }

One issue with that (and with the previous approach as well) is that we may be bringing to front a window that was selected very early. If this becomes a nuisance for you, you could instead, traverse the taskbar buttons, if there are any and choose which one to activate. There might have some means to remember the order the buttons have been activated; for instance, a DateTime would need to be stored each time a taskbar button is toggled "on", then you would always be able to tell which button was last activated to re-select it.

The list of taskbar buttons can be accessed via App.Desktop1.desktop.taskbar.windowBar.items.items.

The following could be used to tell which button has the "pressed" status. While it highlights how to act with one or more desktop buttons, the code per se won't be very useful in our case as we want "the last activated button among the available ones"; thus the "DateTime" information should be added as one way to solve if you need to focus back the last focused window.

Code:

App.Desktop1.desktop.taskbar.windowBar.items.each( function(taskBtn) { if (taskBtn.pressed) { console.log("window '" + taskBtn.text + "' should be in front."); } } );

Hope this helps!

Awesome! It works as I expected now. Thanks for all your details!
Please close this thread.
Thanks again.

Thanks for the feedback, glad it helped!