Ext Windows & Window Group
Friday February 1, 2008 4:36 PM
Word Count: 677
<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>
<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.
<cfimport prefix="ext" taglib="/cfext">
<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>
cfExt Project Page on RIAForge<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>
Window Group Example
