Ext Windows & Window Group
If you have many windows on a screen that you need to manage them as a group. Ext has a class called WindowGroup that does just that. Last night I added this to my cfExt project and I would like to show you what you can do with it. Here is a basic example that creates and shows 4 separate windows. You will notice that to use a window group you simply create the window group and then use that id as the group for each window. This will tell Ext for each window what group they belong to. If you have not guessed by now you can have multiple groups using the id.
<ext:WindowGroup id="wg"/>
<ext:Window id="win1" title="Window 1" width="300" height="200" initShow="true" x="100" y="100" group="wg">
Window 1
</ext:window>
<ext:Window id="win2" title="Window 2" width="300" height="200" initShow="true" x="200" y="200" group="wg">
Window 2
</ext:Window>
<ext:window id="win3" title="Window 3" width="300" height="200" initShow="true" x="300" y="300" group="wg">
Window 3
</ext:Window>
<ext:window id="win4" title="Window 4" width="300" height="200" initShow="true" x="400" y="400" group="wg">
Window 4
</ext:Window>
</ext:Application>
So now we have our windows on the screen and they all belong to a group, what can we do with them. Straight from the docs here is a list of methods that belong to the WindowGroup Class.
- bringToFront - Brings the specified window to the front of any other active windows.
- each - Executes the specified function once for every window in the group, passing each window as the only parameter.
- get - Gets a registered window by id.
- getActive - Gets the currently-active window in the group.
- getBy - Returns zero or more windows in the group using the custom search function passed to this method.
- hideAll - Hides all windows in the group.
- sendToBack - Sends the specified window to the back of other active windows.
Now that we have the id of our WindowGroup (wg) we can call all of these functions. Here is the final code for the example as well as a link to the example and project page.
<html>
<head>
<title>Window Group</title>
<script type="text/javascript">
function sayHello(win) {
alert("hello " + win.id);
}
function show(win){
win.show();
}
function changeTitles(win){
win.setTitle("MY NEW TITLE");
}
</script>
</head>
<body>
<ext:Application path="/cfext">
<ext:WindowGroup id="wg"/>
<ext:Window id="win1" title="Window 1" width="300" height="200" initShow="true" x="100" y="100" group="wg">
Window 1
</ext:window>
<ext:Window id="win2" title="Window 2" width="300" height="200" initShow="true" x="200" y="200" group="wg">
Window 2
</ext:Window>
<ext:window id="win3" title="Window 3" width="300" height="200" initShow="true" x="300" y="300" group="wg">
Window 3
</ext:Window>
<ext:window id="win4" title="Window 4" width="300" height="200" initShow="true" x="400" y="400" group="wg">
Window 4
</ext:Window>
</ext:Application>
<a href="##" onclick="wg.each(sayHello)">Say Hello For Each Window</a> |
<a href="##" onclick="wg.bringToFront(win3)">Bring 3 To The Front</a> |
<a href="##" onclick="wg.sendToBack(win3)">Send 3 To The Back</a> |
<a href="##" onclick="wg.hideAll()">Hide All Windows</a> |
<a href="##" onclick="wg.each(show)">Show All Windows</a> |
<a href="##" onclick="wg.each(changeTitles)">Change Titles</a>
</body>
</html>
