[CLOSED] V2.0 DeskTop Window Restore

  1. #1

    [CLOSED] V2.0 DeskTop Window Restore

    Hi, open a window on Desktop, the window is opened with the exact size, maximize the window and restore, the position is shifted to botton, remaximized and reRestore e the position it's again shifted to botton, the result is that the window disappears down..
    In the example: https://examples2.ext.net/#/Desktop/...tion/Overview/
    the GridWindow work ok, maximized and restore the position not shift to the botton and I can not understand why my window is moved down.
    Here my Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ARWebRevolution.WebForm1" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Desktop ID="DesktopHome" runat="server">
            <DesktopConfig ID="DesktopConfigHome" Wallpaper="Images/Wallpaper/desk.jpg" WallpaperStretch="true">
                <TopBar>
                    <ext:Toolbar runat="server" Height="70" Layout="FitLayout" AnchorHorizontal="100%">
                        <Items>
                            <ext:Panel ID="PanelHeader" runat="server" Region="North" Height="70" Title="Test conversion 1.2 to 2.0"
                                Cls="textCenter" AutoScroll="true">
                                <TopBar>
                                    <ext:Toolbar ID="ToolbarHeader" runat="server" Height="40">
                                        <Items>
                                            <ext:Button ID="SplitButton2" runat="server" Text="Utenti" Icon="User" Scale="Medium">
                                                <Menu>
                                                    <ext:Menu ID="Menu1" runat="server">
                                                        <Items>
                                                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Utenti" Icon="Add">
                                                                <Listeners>
                                                                    <Click Handler="openUtenti(#{DesktopHome});" />
                                                                </Listeners>
                                                            </ext:MenuItem>
                                                            <ext:MenuItem ID="MenuItem2" runat="server" Text="Item2" />
                                                            <ext:MenuItem ID="MenuItem3" runat="server" Text="Item3" />
                                                        </Items>
                                                    </ext:Menu>
                                                </Menu>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </DesktopConfig>
            <TaskBar>
            </TaskBar>
        </ext:Desktop>
        </form>
    </body>
    <script type="text/javascript">
    
        var show = function (app, windowId, pagina, titolo, icona, width, height) {
            var desktop = app.getDesktop()
    
            //Controlla se la finestra è già aperta
            win = desktop.windows.get(windowId);
    
    
            if (!win) {
                //Se non è già aperta crea la nuova finestra
                var cfg = {
                    id: windowId,
                    runat: 'server',
                    title: titolo,
                    iconCls: icona,
                    x: 20,
                    y: 20,
                    width: width,
                    height: height,
                    maxHeight: (app.viewport.height - 100),
                    closeAction: 'Destroy',
                    minimizable: true,
                    maximizable: true,
                    border: true,
                    loader:
                            {
                                url: pagina,
                                renderer: 'frame'
                            }
                };
                win = desktop.createWindow(cfg);
            }
    
            win.show();
        };
    
        var openUtenti = function (app) {
    
            show(app, 'winUtenti', 'http://www.ext.net', 'Prova', '#User', 900, 600);
        };
    
    </script>
    </html>
    If you could please help me

    Thank
    Aurelio
    Last edited by Daniil; Jan 30, 2012 at 11:14 AM. Reason: [CLOSED]
  2. #2
    I noticed that the problem is the toolbar content in the:
     <DesktopConfig ID="DesktopConfigHome" Wallpaper="Images/Wallpaper/desk.jpg" WallpaperStretch="true">
                <TopBar>
                    <ext:Toolbar runat="server" Height="70" Layout="FitLayout" AnchorHorizontal="100%">
                        <Items>
                            <ext:Panel ID="PanelHeader" runat="server" Region="North" Height="70" Title="Test conversion 1.2 to 2.0"
                                Cls="textCenter" AutoScroll="true">
                                <TopBar>
                                    <ext:Toolbar ID="ToolbarHeader" runat="server" Height="40">
                                        <Items>
                                            <ext:Button ID="SplitButton2" runat="server" Text="Utenti" Icon="User" Scale="Medium">
                                                <Menu>
                                                    <ext:Menu ID="Menu1" runat="server">
                                                        <Items>
                                                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Utenti" Icon="Add">
                                                                <Listeners>
                                                                    <Click Handler="openUtenti(#{DesktopHome});" />
                                                                </Listeners>
                                                            </ext:MenuItem>
                                                            <ext:MenuItem ID="MenuItem2" runat="server" Text="Item2" />
                                                            <ext:MenuItem ID="MenuItem3" runat="server" Text="Item3" />
                                                        </Items>
                                                    </ext:Menu>
                                                </Menu>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:Panel>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </DesktopConfig>
    The restore the window, is shifted to botton for the dimension of the toolbar, if remove the toolbar Restore work OK..

    Any suggestion to this problem is appreciated

    Tnks
    Aurelio
  3. #3
    Hi,

    Thanks for the report.

    Here is the minimized sample to reproduce the problems. I have discovered the second problem apart from the one you've reported.

    The two problems:

    1. Maximize and restore the Window 2-3 times ==> the Window is going down on each iteration.

    Seems, each time it goes down the distance which equals the Toolbar's Height.

    2. Try to remove the "iconCls" config option ==> a JS error "cls is undefined" occurs on page load.

    We are investigating.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
        <script type="text/javascript">
    
            var showWindow = function (app) {
                var win = app.getDesktop().createWindow({
                    title       : "Maximize me and restore 2-3 times",
                    width       : 900,
                    height      : 600,
                    maximizable : true,
                    iconCls     : "#User" //a JS error occurs without this config option
                });
    
                win.show();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Desktop ID="Desktop1" runat="server">
                <DesktopConfig>
                    <TopBar>
                        <ext:Toolbar runat="server" Height="150" />
                    </TopBar>
                </DesktopConfig>
                <Listeners>
                    <Ready Handler="showWindow(#{Desktop1});" />
                </Listeners>
            </ext:Desktop>
        </form>
    </body>
    </html>
  4. #4
    Hi Daniil

    Thanks for the answer...

    The second problem I had not noticed because I never removed the IconCls, but in fact points out js error..

    Thanks
    Aurelio
  5. #5
    The fixes have been added to SVN.

    For now, to fix it locally, you can place the following script into a page's <head>. Then remove with DP2.

    Fixes
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        Ext.window.Window.override({
            maximize : function() {
                var me = this;
    
                if (!me.maximized) {
                    me.expand(false);
                    if (!me.hasSavedRestore) {
                        me.restoreSize = me.getSize();
                        me.restorePos = me.getPosition(true);
                        if (me.isContainedFloater && me.isContainedFloater()) {
                            var floatParentBox = me.floatParent.getTargetEl().getViewRegion();
                            me.restorePos[0] -= floatParentBox.left;
                            me.restorePos[1] -= floatParentBox.top;
                        }
                    }
    
                    if (me.maximizable) {
                        me.tools.maximize.hide();
                        me.tools.restore.show();
                    }
                    me.maximized = true;
                    me.el.disableShadow();
    
                    if (me.dd) {
                        me.dd.disable();
                    }
                    if (me.resizer) {
                        me.resizer.disable();
                    }
                    if (me.collapseTool) {
                        me.collapseTool.hide();
                    }
                    me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
                    me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
    
                    me.syncMonitorWindowResize();
                    me.setPosition(0, 0);
                    me.fitContainer();
                    me.fireEvent('maximize', me);
                }
                return me;
            }
        });
    
        Ext.ux.desktop.Desktop.override({
            centerWindow: function() {
                var me = this,
                    xy;
                
                if (me.isVisible()) {
                    xy = me.el.getAlignToXY(me.desktop.body, 'c-c');
                    me.setPagePosition(xy);
                } else {
                    me.needsCenter = true;
                }
                return me;
            },
    
            afterWindowFirstLayout : function() {
                var me = this,
                    hasX = Ext.isDefined(me.x),
                    hasY = Ext.isDefined(me.y),
                    pos, xy;        
            
                if (me.floating && (!hasX || !hasY)) {
                    if (me.floatParent) {
                        xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
                    } else {
                        xy = me.el.getAlignToXY(me.container, 'c-c');
                    }
                    me.pageX = xy[0];
                    me.pageY = xy[1];
    
                    me.setPagePosition(me.pageX, me.pageY);
                    me.fireEvent('boxready', me);
                    return;
                }
    
                if (hasX || hasY) {
                    me.setPosition(me.x, me.y);
                }
                me.fireEvent('boxready', me);
    
            },
    
            createWindow: function(config, cls) {
                var me = this, 
                    win, 
                    cfg = Ext.applyIf(config || {}, {
                        stateful: false,
                        isWindow: true,
                        constrain : true,
                        //constrainHeader: true,
                        minimizable: true,
                        maximizable: true,
                        center: me.centerWindow,
                        afterFirstLayout : me.afterWindowFirstLayout,
                        desktop: me
                    });
    
                cls = cls || Ext.window.Window;
                win = me.add(new cls(cfg));
    
                me.windows.add(win);
    
                win.taskButton = me.taskbar.addTaskButton(win);
                win.animateTarget = win.taskButton.el;
            
                win.on({
                    activate: me.updateActiveWindow,
                    beforeshow: me.updateActiveWindow,
                    deactivate: me.updateActiveWindow,
                    minimize: me.minimizeWindow,
                    destroy: me.onWindowClose,
                    titlechange: function(win){
                        if(win.taskButton){
                            win.taskButton.setText(win.title);
                        }
                    },
                    iconchange: function(win){
                        if(win.taskButton){
                            win.taskButton.setIconCls(win.iconCls);
                        }
                    },
                    scope: me
                });
    
                win.on({
                    afterrender: function () {
                        win.dd.xTickSize = me.xTickSize;
                        win.dd.yTickSize = me.yTickSize;
    
                        if (win.resizer) {
                            win.resizer.widthIncrement = me.xTickSize;
                            win.resizer.heightIncrement = me.yTickSize;
                        }
                    },
                    single: true
                });
    
                if(win.closeAction == "hide"){
                    win.on("close", function(win){
                        this.onWindowClose(win);
                    }, this);
                }
                else{
                    // replace normal window close w/fadeOut animation:
                    win.doClose = function ()  {
                        win.doClose = Ext.emptyFn; // dblclick can call again...
                        win.el.disableShadow();
                        win.el.fadeOut({
                            listeners: {
                                afteranimate: function () {
                                    win.destroy();
                                }
                            }
                        });
                    };
                }
    
                return win;
            }
        });
    
        Ext.panel.Panel.prototype.setIconCls = function (cls) {
            if (cls) {
                this.setIconClsOld(cls.indexOf('#') === 0 ? X.net.RM.getIcon(cls.substring(1)) : cls);
            }
        }; 
    </script>
    Here is the full example.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.window.Window.override({
                maximize : function() {
                    var me = this;
    
                    if (!me.maximized) {
                        me.expand(false);
                        if (!me.hasSavedRestore) {
                            me.restoreSize = me.getSize();
                            me.restorePos = me.getPosition(true);
                            if (me.isContainedFloater && me.isContainedFloater()) {
                                var floatParentBox = me.floatParent.getTargetEl().getViewRegion();
                                me.restorePos[0] -= floatParentBox.left;
                                me.restorePos[1] -= floatParentBox.top;
                            }
                        }
    
                        if (me.maximizable) {
                            me.tools.maximize.hide();
                            me.tools.restore.show();
                        }
                        me.maximized = true;
                        me.el.disableShadow();
    
                        if (me.dd) {
                            me.dd.disable();
                        }
                        if (me.resizer) {
                            me.resizer.disable();
                        }
                        if (me.collapseTool) {
                            me.collapseTool.hide();
                        }
                        me.el.addCls(Ext.baseCSSPrefix + 'window-maximized');
                        me.container.addCls(Ext.baseCSSPrefix + 'window-maximized-ct');
    
                        me.syncMonitorWindowResize();
                        me.setPosition(0, 0);
                        me.fitContainer();
                        me.fireEvent('maximize', me);
                    }
                    return me;
                }
            });
    
            Ext.ux.desktop.Desktop.override({
                centerWindow: function() {
                    var me = this,
                        xy;
                
                    if (me.isVisible()) {
                        xy = me.el.getAlignToXY(me.desktop.body, 'c-c');
                        me.setPagePosition(xy);
                    } else {
                        me.needsCenter = true;
                    }
                    return me;
                },
    
                afterWindowFirstLayout : function() {
                    var me = this,
                        hasX = Ext.isDefined(me.x),
                        hasY = Ext.isDefined(me.y),
                        pos, xy;        
            
                    if (me.floating && (!hasX || !hasY)) {
                        if (me.floatParent) {
                            xy = me.el.getAlignToXY(me.floatParent.getTargetEl(), 'c-c');
                        } else {
                            xy = me.el.getAlignToXY(me.container, 'c-c');
                        }
                        me.pageX = xy[0];
                        me.pageY = xy[1];
    
                        me.setPagePosition(me.pageX, me.pageY);
                        me.fireEvent('boxready', me);
                        return;
                    }
    
                    if (hasX || hasY) {
                        me.setPosition(me.x, me.y);
                    }
                    me.fireEvent('boxready', me);
    
                },
    
                createWindow: function(config, cls) {
                    var me = this, 
                        win, 
                        cfg = Ext.applyIf(config || {}, {
                            stateful: false,
                            isWindow: true,
                            constrain : true,
                            //constrainHeader: true,
                            minimizable: true,
                            maximizable: true,
                            center: me.centerWindow,
                            afterFirstLayout : me.afterWindowFirstLayout,
                            desktop: me
                        });
    
                    cls = cls || Ext.window.Window;
                    win = me.add(new cls(cfg));
    
                    me.windows.add(win);
    
                    win.taskButton = me.taskbar.addTaskButton(win);
                    win.animateTarget = win.taskButton.el;
            
                    win.on({
                        activate: me.updateActiveWindow,
                        beforeshow: me.updateActiveWindow,
                        deactivate: me.updateActiveWindow,
                        minimize: me.minimizeWindow,
                        destroy: me.onWindowClose,
                        titlechange: function(win){
                            if(win.taskButton){
                                win.taskButton.setText(win.title);
                            }
                        },
                        iconchange: function(win){
                            if(win.taskButton){
                                win.taskButton.setIconCls(win.iconCls);
                            }
                        },
                        scope: me
                    });
    
                    win.on({
                        afterrender: function () {
                            win.dd.xTickSize = me.xTickSize;
                            win.dd.yTickSize = me.yTickSize;
    
                            if (win.resizer) {
                                win.resizer.widthIncrement = me.xTickSize;
                                win.resizer.heightIncrement = me.yTickSize;
                            }
                        },
                        single: true
                    });
    
                    if(win.closeAction == "hide"){
                        win.on("close", function(win){
                            this.onWindowClose(win);
                        }, this);
                    }
                    else{
                        // replace normal window close w/fadeOut animation:
                        win.doClose = function ()  {
                            win.doClose = Ext.emptyFn; // dblclick can call again...
                            win.el.disableShadow();
                            win.el.fadeOut({
                                listeners: {
                                    afteranimate: function () {
                                        win.destroy();
                                    }
                                }
                            });
                        };
                    }
    
                    return win;
                }
            });
    
            Ext.panel.Panel.prototype.setIconCls = function (cls) {
                if (cls) {
                    this.setIconClsOld(cls.indexOf('#') === 0 ? X.net.RM.getIcon(cls.substring(1)) : cls);
                }
            }; 
        </script>
    
        <script type="text/javascript"> 
            var showWindow = function (app) {
                var win = app.getDesktop().createWindow({
                    title       : "Maximize me and restore 2-3 times",
                    width       : 900,
                    height      : 600,
                    maximizable : true,
                    //iconCls     : "#User" //a JS error occurs without this config option
                });
     
                win.show();
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:Desktop ID="Desktop1" runat="server">
                <DesktopConfig>
                    <TopBar>
                        <ext:Toolbar runat="server" Height="150" />
                    </TopBar>
                </DesktopConfig>
                <Listeners>
                    <Ready Handler="showWindow(#{Desktop1});" />
                </Listeners>
            </ext:Desktop>
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] V2.0 DeskTop window
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 20, 2012, 12:51 PM
  2. [CLOSED] Minimize window created in another desktop window
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 03, 2011, 1:46 PM
  3. [CLOSED] Restore State?
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 20, 2010, 1:58 PM
  4. Refreshing desktop control from desktop window
    By AnilVelamuri in forum 1.x Help
    Replies: 0
    Last Post: May 26, 2010, 7:53 AM
  5. Replies: 3
    Last Post: Feb 03, 2009, 5:57 PM

Posting Permissions