[OPEN] [#1640] [4.8.1] Desktop window not getting maximized and TopBar behind windows

[mehdy]

Hi I am new here
I trying ext.net for mvc and trying a short cut with a window on the desktop
I have
1. when maximize set to true its not working I used the old work around and its now maximizing

Ext.ux.desktop.Desktop.override({  onShortcutItemClick: function (dataView, record) {
    //Ext.QuickTips.disable();
    console.log('onShortcutItemClick');
    var me = this,
      module = me.app.getModule(record.data.module),
      win;


    if (module && record.data.handler && Ext.isFunction(record.data.handler)) {
      record.data.handler.call(this, module);
    } else {
      win = module && module.createWindow();
      if (win && !win.maximized) { // added && !win.maximized
        me.restoreWindow(win);
      }
    }
  }
});

2. if I put a top bar the window covers it when a tooltip shows up
here is my code

@{    ViewBag.Title = "Desktop - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}


@section headtag
{
    <link href="/Content/desktop.css" rel="stylesheet" />


    <script>


        Ext.ux.desktop.Desktop.override({
            onShortcutItemClick: function (dataView, record) {
                //Ext.QuickTips.disable();
                console.log('onShortcutItemClick');
                var me = this, module = me.app.getModule(record.data.module),
                    win;


                if (module && record.data.handler && Ext.isFunction(record.data.handler)) {
                    record.data.handler.call(this, module);
                }
                else {
                    win = module && module.createWindow();
                    if (win && !win.maximized) { // added && !win.maximized
                        me.restoreWindow(win);
                    }
                }
            }
        });


        function closeWindow(windowName) {
            console.log('Code Win');
            //var el = window.Ext.ComponentQuery.query('#' + windowName);
            //if (el.length > 0) {
            //    var win = window.Ext.getCmp(el[0].id);
            //    if (win.getEl() !== null) {
            //        win.getEl().animate({ 'width': '0px', 'height': '0px' });
            //    }
            //}
        }


        function openWindow(winId, width, height) {
            console.log('Open Win');
            //var el = window.Ext.ComponentQuery.query('#' + winId);
            //if (el.length > 0) {
            //    var win = window.Ext.getCmp(el[0].id);
            //    if (win.getEl() !== null) {
            //        win.getEl().animate({ 'width': width + 'px', 'height': height + 'px', 'duration': '800' });
            //    }
            //}
        }


        function moveWin(winId, x, y, ww) {
            console.log(x, y, ww);
            var el = window.Ext.ComponentQuery.query('#' + winId);
            if (el && el.length > 0) {
                var win = window.Ext.getCmp(el[0].id);
                if (win.getEl() !== null) {
                    win.maximized = false;
                    win.maximize();
                }
            }
        }


        var tile = function () {
            Ext.net.Desktop.desktop.tileWindows();
        };


        var cascade = function () {
            Ext.net.Desktop.desktop.cascadeWindows();
        };


        var initSlidePanel = function () {
            this.setHeight(Ext.net.Desktop.desktop.body.getHeight());


            if (!this.windowListen) {
                this.windowListen = true;


                this.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0]);
                Ext.on("resize", initSlidePanel, this);
            }
        };
    </script>
}


@section example
{
        @(
            Html.X().Desktop()
                .ID("Desktop1")
                .Listeners(l =>
                {
                    l.Ready.BroadcastOnBus = "App.Desktop.ready";
                })
                .Modules(
                    Html.X().DesktopModule()
                    .ModuleID("Hello")
                )
                .DesktopConfig(
                    Html.X().DesktopConfig().ID("DeskTop1").RTL(true)
                        .TopBar(
                        Html.X().Toolbar().Items(
                                Html.X().DisplayField().FieldLabel("Salam")
                            )
                         )
                        //.Wallpaper("~/Content/wallpapers/blue.jpg")
                        .ShortcutDragSelector(false)
                )
        )
        @Html.Partial("GridWindow")
}

just put grid window from samples

[fabricio.murta]

Hello @mehdy, and welcome to Ext.NET forums!

About your topic 1:

You said you found an old override that fixes desktop windows' maximized on open. Is it old from an old Ext.NET version, or was it in the project you are (probably) migrating to a new Ext.NET version? Did you find that in another forum thread?

We have fixed an issue that looks just like the one you're reporting back in Ext.NET 4.5.0 as #1565.

About your topic 2:

I don't really see the code for the window as you describe. Please don't share code in .txt files, add them in [code][/code] blocks so we can readily read them. Shared code blocks are supposed do be the minimal necessary to reproduce the issue. This way we can help you in a timely manner.

If a little lost as being new around forums, please dedicate some time to review our guidelines threads, I'm sure it will be worth the while:
- Tips for creating simplified code samples
- More Information Required
- Forum Guidelines

Looking forward to your follow-up!

[mehdy]

Hi
thanks for quick reply
File manager did not let me to upload cshml file.
any way. its a very simple to reproduce what I've done.
I just downloaded the mvc samples from https://github.com/extnet/mvc.ext.net

For Topc 1 (Window not getting maximized)

please edit src\Areas\Desktop\Views\Overview\GridWindow.cshtml

and add .Maximized(true) at line 59 like

Html.X().Window()
         .Icon(Icon.Table)
         .Width(740)
         .Height(480)
         .Layout(LayoutType.Fit)
         .Title("Grid Window")
   --->  .Maximized(true)
         .TopBarItem(

and run. you clearly see window opens and quickly restores to the top left corner instead of been maximized
if you add this piece of code to the src\Areas\Desktop\Views\Overview\Desktop.cshtml inside <script> tag, then it works fine

Ext.ux.desktop.Desktop.override({
            onShortcutItemClick: function (dataView, record) {
                //Ext.QuickTips.disable();
                console.log('onShortcutItemClick');
                var me = this, module = me.app.getModule(record.data.module),
                    win;

                if (module && record.data.handler && Ext.isFunction(record.data.handler)) {
                    record.data.handler.call(this, module);
                }
                else {
                    win = module && module.createWindow();
                    if (win && !win.maximized) { // added && !win.maximized
                        me.restoreWindow(win);
                    }
                }
            }
        });

For Topc 2 (maximized window covers top bar)
Another strange behaviour is for maximized window covering up top bar. just add a simple topbar to desktop configuration and with the grid window (or any window) maximized, make a tooltip show up (hover over window's close button or any button with tooltip) or open a drop down then maximized window jumps over top bar.
if it helps this happens with qtip tooltips and window location's y gets value of -32 or -33
here is the code, add it to src\Areas\Desktop\Views\Overview\Desktop.cshtml line 144

.DesktopConfig(
                Html.X().DesktopConfig()
                    .Wallpaper("~/Areas/Desktop/Content/wallpapers/blue.jpg")
                    .ShortcutDragSelector(true)
                    .ShortcutDefaults(defaults =>
                    {
                        defaults.IconCls = "x-default-shortcut";
                    })
        ---->       .TopBar(
                     Html.X().Toolbar().Items(
                            Html.X().Button()
                                .Text("Add Something")
                                .Icon(Icon.Add)
                                .ToolTip("Add a new row"),

                            Html.X().ToolbarSeparator(),

                            Html.X().Button()
                                .Text("Options")
                                .Icon(Icon.Plugin),

                            Html.X().ToolbarSeparator(),

                            Html.X().Button()
                                .Text("Remove Something")
                                .Icon(Icon.Decline)
                                .ToolTip("Remove the selected item")
                        ))

I just checked both of these bugs are not available in version 4.1

[fabricio.murta]

Hello @mehdy!

Sorry for the extended time to reply to your very well elaborate report, it was really helpful to understand the problem you're facing!

For one, we logged the issue with the maximized window under github #1640, it's simple enough and should make it to the next Ext.NET release. No promises, we'll post a follow-up here as soon as it gets fixed.

As for the window-over-topbar issue, it is just an ordinary toolbar. If you want it to behave as 'always on top', just set it up to be always on top and you should get rid of the undesired behavior.

Also worth noting, if you try adding a BottomBar instead, you'll notice it is silently ignored by the client-side code and replaced with the taskbar (the desktop's, with start button, quick launch, tray). This indicates the top and bottom bars' features are simply not supported/enforced with the Desktop to assume different role than their default.

Hope this helps!

[mehdy]

Hi @fabricio.murta
Allways On top not working neither on TopBar iteself nor on toolbar inside it
Windows position initialy is OK but when I hover over a button with a qtip tooltip
this maximized window jumps up and covers the top bar and leaves exact same height empty at the buttom
this means windows height is calculated correctly but its position is kind of confused.
also desktop icons go behind top bar.

                  .TopBar(
             --->        Html.X().Toolbar().AlwaysOnTop(true).Items(
                            Html.X().Button()
                                .Text("Add Something")
                                .Icon(Icon.Add)
                                .ToolTip("Add a new row").AlwaysOnTop(true)
             --->           )).AlwaysOnTop(true)

Please check this video
https://www.dropbox.com/s/rp8g83wjnd...Cover.mp4?dl=0

[fabricio.murta]

Hello @mehdy!

As said in our last post,

This indicates the top and bottom bars' features are simply not supported/enforced with the Desktop to assume different role than their default.

It's better you don't rely on topbars with the Desktop component. You'd have to deal with issues on your own if you do so. In this case, easiest way seems to be just disabling the tooltip with CloseToolText being set as empty in the window definition, so no tooltip shows at all.

We have logged it under #1641 as an issue, but to have this one working, it's pretty much adding TopBar (and maybe bottombar) support to the component and would require a major overhaul as other issues are very likely to show up in different scenarios.

Hope this helps!

[mehdy]

Hi
Hope to see fixes in future versions.
These Problems not available in version 4.1
So i think could be small bugs.
Anyway Thanks and have a nice time

[fabricio.murta]

A similar question was asked here and I could come up with this simple override that at least keeps the maximized window, maximized.

There is at least one problem that also needs to be tackled though that is, if that window is "restored", it is drawn with specified width/height at position 0,0 from the screen. While that's not really troublesome, once it is first restored, if the titlebar is dragged, then the window is insta-moved to the center of the window in an unexpected "late fix" for the window's positioning.

Either disabling drag (Draggable="false") or not allowing it to me restored ("de-maximized", Maximizable="false") are possible simple ways to avoid the behavior -- and that might be okay with windows that are supposed to occupy the whole screen.

Ext.define("gh1640", {
    override: "Ext.ux.desktop.Desktop",
    onShortcutItemClick: function (dataView, record) {
        var me = this,
            module = me.app.getModule(record.data.module),
            win = module && module.createWindow();

        if (win && !win.maximized) {
            me.restoreWindow(win);
        }
    }
});