PDA

View Full Version : [CLOSED] V2.0 DeskTop Window Restore



Aurelio
Jan 25, 2012, 3:39 PM
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: http://examples2.ext.net/#/Desktop/Introduction/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

Aurelio
Jan 25, 2012, 4:01 PM
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

Daniil
Jan 25, 2012, 11:19 PM
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>

Aurelio
Jan 26, 2012, 12:14 AM
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

Daniil
Jan 27, 2012, 11:11 AM
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>