Adding Custom Buttons to <cfwindow/>
The other day I wrote a short article on ColdFusion 8 custom grid toolbars. One reader had a question that I would like to share with you. Trond writes -
Do you know if a similar toolbar can be added to the bottom of a cfwindow?
The answer to this question is two fold. No there is not a panel are on the bottom like there is in the grid or even in the window components in Ext 2.0. This does not prevent you from customizing your windows though. You can add buttons to the window and I will show you how quickly you can do so. After the page loads I am using the ajaxOnLoad method to call my init method.
The first thing I need to do is create my window. You can see I have setup some basic properties on my window and using initShow=true will cause the window to show on page load.
initShow="false" minHeight="100" minWidth="200" resizable="true" title="Notify Administrator" width="400">
Type Message here
</cfwindow>
<cfset ajaxonload("init")>
Here is the only part you need to wrap your head around. When we use the cfwindow tag ColdFusion imports all of the Ext framework libraries necessary to create the window. The button classes are not part of that include so we need to explicitly import them.
Now that we have our button class this is very simple. Here we have our init method that should run after the page is setup. Because there is no attribute of cfwindow for adding buttons we need to create an a event listener on the window. To do that we must first get the window object. After we have the window object we can say here is what we want you to do before you show the window component. The action we want it to do is to add a button. The window has a method for adding a button. The button takes a button config and you can learn more about that in the docs but its pretty straight forward. Finally we add a handler to our button that will call the method sayHello when its clicked.
function init(){
myWindow = ColdFusion.Window.getWindowObject('MyWindow');
myWindow.addButton({
text:"My Button",
cls:"x-btn-text-icon",
icon:"add.png",
handler:sayHello
});
}
function sayHello(){
alert("hello");
}
</script>
