Andrew's ramblings

ColdFusion and leveraging ExtJS from within – Part I

Tags: Coldfusion, extJS

This is the beginning of a series of tutorials that I will be writing that shows how to use ExtJS that comes with ColdFusion, in both ColdFusion 8 and 9.

I am a huge fan of ExtJS and the power that it can deliver to the developer, and with some knowledge any developer can begin to use this power to create some very interesting components.

Before we Begin

Now before I begin in getting into this in depth, there are a couple of things one needs to know about using ExtJS that is shipped with ColdFusion. Adobe have in their wisdom instead of extending the style sheets chose to modify them directly, this means that some things will be broken and some things will look different because it was either not thought about or Adobe have not finished what they wanted to do. Either way please be aware that this is an issue when using widgets in ExtJS that is shipped with ColdFusion.

The Scripts

When using the ExtJS scripts in ColdFusion there is different libraries for doing different things, so if you intention is not to do any widgets and just use the power of ExtJS to manipulate the DOM or just do Ajax stuff then there is a different library to include, as their is if you want to debug your code in a debugger. For example the following snippet of code is to load just the core libraries.

Where as the following is used for the debugging of code if you want to step through the and understand the core of ExtJS some more.

And of course if you want to begin using and creating your own widgets, then you will need to use the style sheet and the full library to begin coding these with.

Loading Content into an Element the ExtJS way

You will be familiar with the way ColdFusion uses bind to load content from a server, I have never been 100% happy with the way it has been implemented into ColdFusion when it comes to loading style sheets and java with that content. It is certainly possible, but I have had issues with it at times. And have had to use an alternative to this when I want to do it in a way that ColdFusion will not allow, which hasn't been often I must admit. But this is just to show you that it can be done, and extended to do things that ColdFusion might not allow you to do.

So lets have a look at the code first.

Now the above code is actually very simple so lets describe exactly what it is doing.

The first part of the call is getting the container we wish to modify with dynamic content, this is done using the Ext.get() and returns an Ext Element object that has different properties and methods to achieve what we may want to do with the object. In the above example we are going to load content from the server. As you can see we have a config structure that is telling us the URL that we wish to get the content from, and the scripts part of that configuration is telling us that we also wish to run and execute any JavaScript that is in that content as well.

Applying styles to an Element

Another thing that we can do here is change the style of an element as well. For example we may wish to change the appearance of the element based on some condition, so we can do this with the following snippet of code.

or even remove a class from an element.

Using the above snippets only requires the core library of ExtJS, as we are not using any of the UI widgets we can get away with the smallest part of ExtJS to do the job.

Where to from here

In the next few posts I am going to step through creating a widget that can be used to create a dynamic FAQ widget that can be used on your site, but for now I am going to give a brief run down on some of the features of the core library that ExtJS has to offer.

For now if you use Fire Fox then I recommend using fireBug if you don't have it installed, and use this line of code to display other methods that this small feature has to offer.

If you are not familiar with fireBug this will display an object that you can click on that will display all the properties and methods for the object.

That's it for now.

Tweet