| Basic Example |
This is an example of how to create a very basic window. The problem with this window is that we have not given it a id. If you do
not create an id for the window instance one will be created for you but it is a unique name that you will never know. This example
shows how to create a window but you will never be able to display it without knowing the id of the window. View the source of this
example so you can see that the tag assigns a unique id to the window. Please move on to the next example.
|
| Show Window on load |
This example will create the same basic window from our first example. Again you will notice we did not assign it an id so the tag will
create one for us, only this time we do not need to know the name of the window because we are using initShow="true" to automatically
show the window when the page loads.
|
| Window Id Example |
If you have been paying attention you should have an understanding of why we need to identify our window. In this example we will give our window a name
and then make it visible by using the show() method. It is important to understand that when you show your window and then close it the window has been destryoed
and can no longer be used. Later on we will have an example of how to simply "hide" the window instead of destroying it.
|
| Multiple Windows |
All the examples up to this point have been a single window. This example will show you how to create multiple windows
on one page. If you have not guessed yet the only trick to this is giving each windoow a unique name. As a side not because
we are not setting any positions in this example they will move on top of eachother but because windows are draggable by default
you can move one of the windows out of the way.
|
| Hide On Close |
As I mentioned earlier every time you create a window and close it you are destroying the window from the dom. There are some times
where you may just want to hide the windw. For example your application has an about screen, there is no reason to create and destory
this window everytime it is requested. To handle instances like this you can override the close action by setting the closeAction
attribute to hide. This will hide the window so you can open and close it has many times as you like
|
| Custom Close |
In the last example we looked at how we can change the close action to hide. What happens if we close the window and we really do need
to destroy the window. Lucky for us their is a built in method close that will destroy the window from the dom. You can prove this theory by
showing the window, clicking the close button to hide the window and then clicking the show button to make the window visible again. Now try
and show the window and use the close link. You will no longer be able to show the window because it has been destroyed from the dom.
|
| Collapsible Windows |
If you set the collapsible attribute to true you will see an expand/collapse toggle button automatically rendered into
the header tool button area. This is handy when you have multiple windows on a screen and want to provide
the user a way to save some screen space by collapsing the window.
|
| Maximizable Window |
If you set the maximizable attribute to true you will display the 'maximize' tool button and allow the user to maximize the window. When the window is
maximized the button will change to a restore button so the user can restore the window to the size it was before maximzing.
|
| Modal Window |
Modal windows are great because they bring all attention to the window. When a window is modal you are unable to interact with anything else on the screen but
the window.
|
| Auto Scroll Example |
If you set the auto scroll attribute to true the window will use overflow:'auto' on the panel's body
and show scroll bars automatically when necessary. Without auto scroll set the content would just be clipped. This example shows 2 windows, the first does not
have auto scroll enabled and you can tell that would really be a pain for a user. The second uses auto scroll and everyone is happy because of it.
|
| Animate Target Example |
The animate target attribute is a nice why of adding style and animation to your window. By padding an element id to the animateTarget attribute we will
create a flyout affect animation for our window. You will also notice the window is animated when the close button is clicked.
|
| Icon Example |
This example shows you how to customize your window by adding an icon to it.
|
| Position Example |
This default behavior of a window is to center itself. You can override this by setting centerWindow to false. When this attribute is set to false
the window position will rely on the x and y attributes. By default these values are 0 but you can set them
to any number.
|
| Position Example #2 |
This example will show you how you can use the set and get position methods. The get position will output the x and y of the window. Using the set
position method you can programatically move the window to another location on the screen.
|
| Size Example |
This examle will show you how to use the getSize() and setSize() methods. Using these methods you can determine the size of a window as well as change
the size of it. One thing to note with this example. If you resize a window it does not automatically get centered for you, you can ceter the window after
you have resized it using the center method.
|
| Change Title Example |
This is just a quick example of how you can use the set title to change the title after window has been created and set visible.
|
| Auto Load Example |
This example shows how you can load content from another template. It also demonstrates that all content in between the start and
end tag is ignored when loading content from a url.
|
| Contacts Example |
This is typical application example. In our example we have a list of contacts each with a contactId. Here we are going to define all of the attributes
of our window but we are not going to show it. Next we create a listing of contacts, this could pull from a table but for our example it will be static.
To the view the details of each record we will call out showDetails method that will capture the contactId. We then show the record and then using the method
load we can load an external url and display the details for this contact. This again is static but could easily be dynamic. Do not forget to change the close
action of the window to hide or this example will not work.
|
| Gray Theme Example |
By default all windows use the aero theme, if you want to change the theme simply pass a theme attribute to the include tag. The only available
option right now is gray.
|
| Full Path Example |
This was added to hopefully solve a path issues where people were not calling the cfext folder from the root. Take for example my domain and lets
say that my cfext folder was in danvega.org/cfwindow/cfext and I was trying to use the tag from danvega.org/cfwindow/whatever. Well the whole
reason that does not work is because the Ext resources are never imported. A quick fix I found was to supply a path to the cfext folder. In my
case it would be http://www.danvega.org/cfwindow/.
|
| Source Example |
The source example shows how you can use an external URL and load it right into the window. The autoLoad attribute will only load local files
for security reasons, this is a way to get around that.
|
| Source Example #2 |
Another Example!
|
