PDA

View Full Version : [EXAMPLE] How to create new windows



snippher
Mar 17, 2009, 11:49 AM
This is my way to create forms:

add this js:


<script language="javascript" type="text/javascript">
function NewWindow(winURL, winTitle, winHeight, winWidth, winModal, winMax, winRes, winCollap) {
if (winTitle == '' || winTitle == undefined) { winTitle = 'Teste' }
if (winCollap == '' || winCollap == undefined) { winCollap = false }
if (winRes == '' || winRes == undefined) { winRes = false }
if (winModal == '' || winModal == undefined) { winModal = false }
if (winHeight == '' || winHeight == undefined) { winHeight = 500 }
if (winWidth == '' || winWidth == undefined) { winWidth = 500 }
var win = new Ext.Window({ renderTo: Ext.getBody(),
maximizable: winMax,
resizable: winRes,
collapsible: winCollap,
constrain: false,
title: winTitle,
height: winHeight,
width: winWidth,
modal: winModal,
frame: true,
autoLoad:{ maskMsg:"Carregando...", showMask:true, mode:"iframe", url: winURL }
});
win.show();
}
</script>

then in buttons use:


<ext:Button ID="Button3" runat="server" Text="Teste" Icon="ServerGo">
<Listeners>
<Click Handler="OpenWindow('teste.aspx', 'Exemplo',200,200,false,false,false)" />
</Listeners>
</ext:Button>

*edit: fixed some bugs and added new vars
please change topic name to How to create new windows

Netopcom
Apr 28, 2009, 8:14 AM
It was EXCATELY what I was looking for :)

You just need to change



OpenWindow('teste.aspx', 'Exemplo',200,200,false,false,false)


to



NewWindow('teste.aspx', 'Exemplo',200,200,false,false,false)


I can use your code now to create a desktop window from an iframe :)

geoffrey.mcgill
Apr 28, 2009, 2:30 PM
If I may offer a few suggestions, your function could be simplified to the following.

Example


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var newWindow = function (url, config) {
new Ext.Window(Ext.apply({
renderTo: Ext.getBody(),
resizable: false,
title: "Teste",
height: 500,
width: 500,
frame: true,
autoLoad: {
maskMsg: "Carregando...",
showMask: true,
mode: "iframe",
url: url
}
}, config)).show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager runat="server" />

<ext:Button ID="Button3" runat="server" Text="Teste" Icon="ServerGo">
<Listeners>
<Click Handler="newWindow('teste.aspx', {title: 'Exemplo', height: 200, width: 200});" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

By passing a 'config' object instead of named parameters when calling newWindow(), you get the flexibility of passing as many or little config options as you like. You only have to override certain properties and the others will be set to their default values.

Hope this helps.

Puia
May 04, 2009, 3:58 PM
 How to call this function or other desktop windows in desktop shortcuts ???? 

Vladimir
May 04, 2009, 4:08 PM
Hi,

In 0.8 version we added ShortcutClick Listener/AjaxEvent to the Desktop

Puia
May 04, 2009, 4:11 PM
 Great and thanks...

olimpia
May 15, 2009, 3:07 PM
I also await ShortcutClick Listener/AjaxEvent to the Desktop.
Thank you.

dbassett74
May 27, 2009, 2:53 PM
Using this example, how would I embed a UserControl inside of the body of the new window?

tonymayoral
Jun 05, 2009, 5:21 PM
is it possible to pass icon to this function?
thanks

Richardt
Aug 24, 2009, 5:00 AM
I have added code so that the same window only appears once if anybody is interested.





function createDynamicWindow(app, urls, descr, ids, vHeight, vWidth) {

var desk = app.getDesktop();

var windows = desk.getManager().getBy(function() { return true; });

var i = 0;

for (i = 0; i <= windows.length - 1; i++) {

if (windows[i].id == ids) {

windows[i].show();

return

}

}

var w = desk.createWindow({

id: ids,

title: descr,

width: vWidth,

height: vHeight,

maximizable: true,

minimizable: true,

pageX: 10,

pageY: 10,

autoLoad: {

url: urls,

maskMsg: "Loading...",

mode: "iframe",

showMask: true,

CenterOnLoad: "false"



}

});

w.show();



}





usage






<Click Handler="createDynamicWindow(#{MyDesktop}, 'CompanyStructure.aspx', 'CompanyStructure', 'idCompanyStructure', 700, 1200);" />

[WP]joju
Oct 06, 2009, 5:26 AM
i am trying to use the callback property of the window's autoload property/object.... because in ExtJs there is a callback property for the autoload... but its not working for me, please help

geoffrey.mcgill
Oct 06, 2009, 10:18 AM
Hi [WP]joju,

Please start a new topic and provide a code sample demonstrating how you currently have the component configured.

huguesV
Oct 22, 2009, 10:09 PM
Thank you for your example, it s very usefull.

I can create a windows from the desktop, works easy.

I m stuck now to the next step, how to create a second "desktop" windows from the first one. If i use this code in the child windows, the new windows will be inside the first one.

Is it possible to create a desktop window (not inside the child window but on the main desktop) with some code inside the child window?

Richardt
Oct 23, 2009, 3:58 AM
Hi Hugues

Yes is is possible.

Place the following code in your desktop aspx page. Replace MyDesktop.getDesktop(); with YourDesktopID.getDesktop();







function createDynamicWindowChild(urls, descr, ids, ht, w, maxi) {


if (ht == 0) {


ht = screen.availHeight - 220;


}


var desk = MyDesktop.getDesktop();


var windows = desk.getManager().getBy(function() { return true; });


var i = 0;


for (i = 0; i <= windows.length - 1; i++) {


if (windows[i].id == ids) {


windows[i].show();


return


}


}








var w = desk.createWindow({


id: ids,


title: descr,


width: w,


height: ht,


maximizable: true,


minimizable: true,


pageX: 10,


pageY: 10,


autoscroll: false,


autoLoad: {


url: urls,


maskMsg: "Loading...",


mode: "iframe",


showMask: true,


CenterOnLoad: "false"





}


});


if (maxi == "M") {


w.maximize()


}


w.show();


}



Then in the child window, with javascript, to call the new window use the following code. If you put an M where the N is the window will be maximized






parent.createDynamicWindowChild('Youraspx', 'Title', 'idofwindow', 500, 900, 'N');


Hope this helps

JohnZhang
Nov 01, 2009, 9:42 AM
It's great and 3Q for sharing

Dominik
Mar 29, 2010, 5:54 PM
Hi,

I'm building a prototipe in which there is a main page with a TabPanel like in the MVC demo (http://mvc.ext.net (http://mvc.ext.net/)).

Each new tab that opens is loading a MVC page.

I wonder if I can open a window from the tab page at the application level (i.e. in the main page) to simulate a desktop-like application.

I also tried to add a Desktop to my prototipe and open my main page in a Panel, but anyway I don't kwon how to open a new desktop windows from another desktop window.

Does anyone would know how to solve this problem?

Dominik
Mar 30, 2010, 11:00 AM
Ok,

I finally could open windows in my prototipe as in a MDI-like environment.

Now, I only have problems to minimize windows. By the moment, I use Collapsable property...

Dominik
Mar 30, 2010, 11:03 AM
How can I pass icon in the 'config' object?



geoffrey.mcgill (4/28/2009)If I may offer a few suggestions, your function could be simplified to the following.

Example


<%@ Page Language="C#" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var newWindow = function (url, config) {
new Ext.Window(Ext.apply({
renderTo: Ext.getBody(),
resizable: false,
title: "Teste",
height: 500,
width: 500,
frame: true,
autoLoad: {
maskMsg: "Carregando...",
showMask: true,
mode: "iframe",
url: url
}
}, config)).show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager runat="server" />

<ext:Button ID="Button3" runat="server" Text="Teste" Icon="ServerGo">
<Listeners>
<Click Handler="newWindow('teste.aspx', {title: 'Exemplo', height: 200, width: 200});" />
</Listeners>
</ext:Button>
</form>
</body>
</html>

By passing a 'config' object instead of named parameters when calling newWindow(), you get the flexibility of passing as many or little config options as you like. You only have to override certain properties and the others will be set to their default values.

Hope this helps.

Yanfang Wang
May 21, 2010, 10:03 AM
Thanks for share .