Andrew's ramblings

ColdFusion and leveraging ExtJS from within - Part II

Tags: Coldfusion, extJS

In my second instalment to writing and using ExtJS that comes with ColdFusion, I am going to begin by building a custom widget that can retrieve Frequently Asked Questions from the server, based on what the user enters as a search Criteria.

Before we begin

ExtJS is very OO in design and it is important that you are aware of this before we begin, this doesn't mean you need to fully understand OO. But it will certainly help as wel move forward, and begin to extend the power of what ColdFusion gives us under the hood.

ExtJS comes with many types of components that can be extended, reused or enhanced to add more features with simplicity. So with that in mind lets look at the first building block to creating our own widget.

First step

The ExtJS component that I am going to look at extending for our widget is the Ext.Component component, this gives us the bare minimum functionality that we need to create what we need. This is achieved by writing the following bit of code to give us an extendable new object, which will be the basis for our new widget.

That small line of code now gives us the a new component called Ext.ux.faqContainer, the ux part of this stands for user extended, now we don't need to use that but for this tutorial I won't complicate things any further just yet.

Now this doesn't do anything just yet and to get it to do something useful we need to write one method, this method will be called initComponent and as the name suggests it is the method that is first called to begin setting the component up. This method already exists in the component as part of the component we are extending, so we need to included it to do things we need done that is addition to what it already does. Also anytime that we overwrite a method we should also call the parents method as well. So lets look at that bit of code now.

As you can see it still doesn't do anything special except we are now setup to begin getting our widget to behave the way we need it too, but first we use the superclass call to make sure that everything else is setup for the underlying component as well.

Our Widget layout

To make sure that our widget has some substance, or a look about it we are now going to add a template that will make this happen for us. This can then be later styled by our style sheet at a later date.

So what we need to do now is add this snippet of code to the initComponent, which then creates the template that our widget is going to be based on. Do make sure that it actually goes after the super call, this ensures that we are in fact extending and not having some of our stuff potentially getting overwritten by the parent component.

Now as you can see this is using another part of Ext which creates a template and then stores it in our widget, this is so that we can use this later within our widget.

Component Rendering

To now get the component rendered into the DOM we need to know add another method to the component, to help give us some more substance to the widget we are creating. This can be achieved by adding another method called onRender to our component, that looks like this.

I will very quickly explain what this is about and some more background to this method, as it is not complicated but it can be achieved with another method if so desired. But in this case we are doing it onRender. The component that we have extended has a method called render which is used to setup what it needs to, and will then do an event to onRender. Since we want the normal render to occur we will call our rendering in the onRender event, as such to not upset the parent. I wont go into to much detail as to the specifics of the parent component at this stage, as it is outside the scope of this post.

Ok now we are going to add the following code to our onRender method, and again it is going to appear beneath the call to our superclass.

This is very simple code and fairly easy to understand, what we are saying here is that we now wish to apply our template to the document. We do this by first applying the template, which returns html. The templates are fairly powerful and can be used to do a lot more than what I am going to show you here, which I might leave for another post for another time.

Anyway the last line above is then saying that we are now going to update the dom node which is the container that is going to hold our widget, and then applys the html to the container.

Using HTML to show our widget

Before I finish up with this part of the tutorial we need to add one more bit of code to our JS file, this is not important normally but in this case it will automatically call the render method to render the widget once the component has been instantiated. This bit of code is as follows.

In the html side of things we now call our object, and apply it with the following snippet of code.

Conclusion

This is the end of this part of the tutorial and we now have a very basic working of a widget, if you were to run this code in fireFox using fireBug you could inspect the DOM to see that the widget has indeed been applied to the webpage. Or you could use the style sheet to apply some basic styles to show it up some, and you should now have a basic understanding on how to create a widget with basic functionality that can be applied to a website.

In the next tutorial on this widget I will go into adding the functionality to make this into a FAQ widget that searches the database, and returns back to our widget using Ajax and more templates to define how the data will eventually look in the widget.