Like you, I have a wide range of development experience. In the past 20 years, I’ve been a huge fan of Java, C#, Flex (Actionscript), ColdFusion, F#, Ruby and Python. In fact, a few years ago in my last job, myself and some colleagues spent a significant amount of time and effort convincing everyone to migrate to Flex-based applications (they have since decided to migrate yet again to .NET). At the time, it was the right move.

Now I would never suggest such a migration

Feel free to disagree with the following opinion, but from what I’ve been seeing over the past couple of years is…

JavaScript is going to be the virtual machine that drives the next 10 years of software evolution.

Not all software, mind you. I’m talking about the revolution that’s going on in mobile, cross-platform, cloud-based computing and development.

Now, what exactly do I mean by that? JavaScript itself is not a virtual machine, it’s simply a programming syntax, right? Well, that’s true, but remember that the companies writing JavaScript engines are making virtual machines – such as Google’s V8 – that parse and execute JavaScript… and they’re fast. In fact, they are becoming so fast, that JavaScript is slowly, but surely, becoming a ubiquitous language that not only builds the logic and validations of an application, but is now building the actual user interface, and the brains behind it (see server side JavaScript).

We’ll get into that later, but I want to start off with a statement to all the legion .NET, Java, Actionscript, Ruby, Python, {insert language here} developers who look with disdain, or even confusion at JavaScript. You’re missing it. You’re missing what’s going on around you, and for anyone who’s been in software for even a short amount of time, you learn that you adapt or you risk becoming marginalized.

Let’s start off with the trends that I’ve been seeing, and also some nice links that really show off the power of these JavaScript virtual machines. Some are obviously impressive, some are subtly so, but all of them give a taste of what’s coming.

Running An Operating System In The Browser

Start off by checking out Fabrice Bellard’s PC emulator with the Linux 2.6.20 kernel on it. That’s right, an operating system running inside a browser.

Imagining the possibilities of utilizing this kind of tool is exciting. Are you an android developer? Imagine writing your code and then being able to emulate the browser-based version of your program and the mobile version in the browser – side by side.

Imagine having a RAM based file system running in the background behind your web application, and using Web Storage to make the environment and experience different for each user – while never having to communicate with a central server.

How about running a dynamic P2P server inside your browser using WebSockets?

All written with JavaScript. Impossible? We’ll see.

One Language To Rule Them All

Yes, the LOTR references will continue to pile up as this article goes on, just accept it!

Appcelerator Titanium

Some months ago (oh about 6) I stumbled across this tool called Titanium. The only reason that I learned of its existence is because the developers of my favorite tool – Aptana IDE – were acquired by the company Appcelerator. I blithely browsed their web site that day thinking they were just another software development company. However, by the time I was done reading their technology road map, my brain had changed. A light had turned on that hasn’t been shut off since.

JavaScript can be used to design entire applications, and then be compiled into almost every operating system using the standard SDKs! How is this possible? So if I want to write an application that can be deployed on the desktop (Windows, OSX, or Linux) and also be deployed to mobile devices as native applications (Android, iOS, Blackberry), I only need one source code library?

The world is changing, indeed.

Node

What can I say about Node.js that hasn’t been said already? Well, for the uninitiated, Node.js is a program written in C++ that allows you to author server-side services in JavaScript. It is entirely event-driven, on a single thread, and is designed to be a non-blocking I/O framework.

I will not go into any details on it here, but for those who have investigated it, I believe it’s the tip of the iceberg, and for those who have not, well, then you need to spend a couple hours this weekend going down the rabbit hole.

Node.js still has a long way to go (Windows support *cough*), but since its introduction to the world in November of 2009, there are now hundreds of modules written for it that will cover most of your interests and needs.

Most impressive so far is a module called Now.js. It allows you to have real-time communication between your server and your clients with one simple JavaScript file. If any of you have ever tried to implement message queues in the .NET or Java environments, you know how many hoops you have to jump through, how it affects performance and your system architecture. This module is so easy and painless to implement, it almost made me laugh when I first saw it work.

If you’re interested, here’s the original presentation given by Ryan Dahl at the JSConf in 2009.

Code Complete

Given these two tools, you can now write your secure, server logic and the entire customer facing application in one language and have it interpreted to any platform. That’s exciting!

Dumbing Down To JavaScript

I’m sure that’s how many software developers would term the desire to write a program in Java or C# and then run it through a compiler to generate JavaScript! Gasp! How plebian… how absurd!

Yet these companies (little ones named Google and Microsoft, respectively) have written these compilers because there’s a need. First, there’s the Google Web Toolkit for Java and, secondly, there’s Script# for the .NET folks.

Google

I have to give a lot of credit to this evolution to Google. Their brilliant engineers have shown us time after time after time that almost anything you think can’t be done with JavaScript, they have done it. Perfect example. Someone (with an apropos name of Putrid Polecat) commented on Ars Technica story about Windows 8 (see link below) with the following uneducated comment.

Serious applications simply cannot be written in HTML 5 and JavaScript. Continued support for C#/c++/Java must, and therefore will, continue. Can you write adobe illustrator in html5? Blender? AutoCAD? A virtual machine emulator? Device drivers? A compiler?

Cmon guys.

Let’s see…

A virtual machine emulator? Well we covered that.

A compiler? They’re working on it with getToken(). Also, I suppose you could just write your own with JS/CC.

AutoCAD? This one’s probably right with JavaScript in its current state. Its floating point calculations might not be able to support the precision needed by a CAD program. There’s hope for the future, though.

Adobe Illustrator? There’s plenty of online image editors available, but nothing yet as comprehensive as Illustrator. However, with the HTML5 Canvas, I’m betting that it’s coming soon.

Speaking of Google, how about a word processor, or spreadsheet application, or database tool in the browser with JavaScript. Google Docs.

However, I agree with his core point about there always being a need for compiled, strongly typed languages. I just want people to understand that JavaScript is as powerful as any other language, and used properly, can achieve mind-blowing results.

It is not the Gollum of programming languages, but as these tools show, it is the Gandalf. The one language that can somehow bring all the pieces together in order to develop and distribute applications as quickly and as powerfully as possible.

The Big Redmond Machine

Windows 8 APIs are going to be HTML5 and JavaScript? Well, I don’t believe that for a second, and the article even ends saying that there’s more to it and Microsoft will give us more details as time goes by. However, given that a monster, a juggernaut, with the development and marketing power of Microsoft comes out and says that it’s banking on the latest round of W3C specs for HTML, CSS, WebSockets, Web Storage and JavaScript speaks louder than most everything else.

I think this is a great move on their part. Having C#, C++ developers working hand in hand with the JavaScript developers to build the communication and business layer that will feed the presentation layer is probably how it will all end up (viz Appcelerator above). But that’s just a guess.

** Update (09/15/2011) Here’s a great article that describes Metro Plugins (or, more specifically, the lack thereof) in more detail, and some basic info on the Metro style browser that will be in Windows 8 and why JavaScript and HTML are the basis of that experience.

Right Under Our Noses The Whole Time

Raise your hand if you remember the hoopla in the late 90′s about Java being the write once, run anywhere platform that would liberate us all!! Go on, raise your hand, no one will notice. Ok, we all remember, and it failed.

Now, raise your hand again if you remember Adobe, and then Microsoft, saying that compiled, vector-based browser plugins are going to allow us to write once, and run anywhere, and it will liberate us all!! Ok, you don’t need to raise your hand this time, but we all remember (it was just a handful of years ago). It also failed.

Is it possible that, like the gorgeous girl in the movie that no one noticed because she wore glasses and had her hair in a pony tail, the answer was right in front of us and no one saw it? Perhaps Google was the catalyst needed, like the movie bet where the jock dares to turn the nerdy girl into the prom queen, to let us see the true beauty and power of this little toy language written by Brendant Eich – who just so happens to be a native Yinzer (look it up) – way back in 1995.

The most beautiful thing about it is that JavaScript will be the glue that can tie all of the tools together. You can utilize Java programs and C# assemblies from your Node server, integrate a Flash movie or communicate with a Silverlight application in your UI, and then, just for fun, execute a command on your local, browser-based operating system.

I’ve got an app in which users need access to a dataset that is larger than 10k records. Pagination to the rescue (plus a search feature which I covered in my Replacing data in Sencha ExtJS grid store article).  I’m giving the users the option of paging through the results 100 at a time if they so wish.

It ended up being simple to accomplish after scouring through the documentation and looking at related articles throughout the Web.

First you need to have a script that returns sets of 100 results. In my case, I have a ColdFusion Component that does a CFQUERY on the table. I simply pass in the number from which I want to start my resultset and it returns the next 100 rows. Convert your query to a JSON string using serializeJSON() in ColdFusion, or any method you wish.

Next, I created a ColdFusion page that accepts a start parameter – which is sent from the PagingBar object in ExtJS – and passes that along to the CFC. The resulting JSON string simply gets output.

<cfsetting enablecfoutputonly="true">

<cfparam default="" name="start">

<cfscript>
providers = application.widget.framework.getBean('Insurance').listInsurance(startRecord=start);
writeOutput(insurers);
</cfscript>

<cfsetting enablecfoutputonly="false">

Next, create a Store object with this page as its proxy, and a JsonReader to parse the results.

var Insurer = Ext.data.Record.create([
       {name: 'col1', type: 'int'},
       {name: 'col2', type: 'string'},
       {name: 'col3', type: 'string'},
       {name: 'col4', type: 'int'}
]);

var InsurerStore = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/insurance.cfm'}),
    reader: new Ext.data.JsonReader({ root: 'data', totalProperty:'totalRecords' }, Insurer)
});

Now you can create your PagingBar object with the Store object you created as its datastore.

var PagingBar = new Ext.PagingToolbar({
    pageSize: 100,
    store: InsurerStore,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: 'No insurers to display'
});

Lastly, attach your PagingBar to a DataGrid object with the bbar property. You also have the option of performing an initial search to show the first 100 record to the user by default. To do this, just call the load() event on your Store (shown below).

var InsurerGrid = new Ext.grid.GridPanel({
   store             : InsurerStore,
   sm                : new Ext.grid.RowSelectionModel({singleSelect:true}),
   cm                : InsurerColumnModel,
   renderTo          : 'insurer-grid',
   frame             : true,
   bbar              : PagingBar
});

InsurerStore.load({params:{start:0, limit:100}});

I decided to tinker around with the drag & drop capabilities of ExtJS and originally had the user click a button, which created a window, into which the user could drag an item from each data set and create the mapping. It worked very well and was a much better interaction than the previous version.

I showed it to a colleague, and he actually thought of a way to make it better. Why not simply allow the user to click and drag an item from one grid to the item on the other grid to which she wanted to map it? Even better. However, when I started to think about the code I would need, I couldn’t think of how to determine which item in the “drop” data grid was the actual target.

Let’s say you have automobiles in one grid, and colors in another. You could let the user drag a color from the second grid onto a specific model of vehicle on the first, but the trick is determining onto which model the user dropped the color.

If I was able to detect the model, I could then show a new window with the requested mapping so that the user could verify her choice.

After some digging around, I discovered that the Grid object’s view has a findRowIndex() method which accepts an Element as an argument. Since the notifyDrop event provides the e.target() property, that was all I needed. I could get the row index, and then retrieve the corresponding item from the data store.

// Determine the row on which the color was dropped
targetRow = TargetGrid.getView().findRowIndex(e.target);
targetDataItem = TargetGrid.store.data.items[targetRow];

You can check out the sample code that shows how to determine the target grid element on my Drag & Drop Target Detection example page.

1. It needed to integrate seamlessly with our existing Cairngorm Extensions
2. It needed to allow for application level messages
3. It needed to allow for client specific messages

The trick was to create an abstract class that multiple departments could use, because internally we use ColdFusion, Java and .NET to produce and consume messages. In our department, we use ColdFusion, so I had to create a concrete implementation of the abstract class called ColdFusionMessagingDelegate which handles the construction and publication of an AsyncMessage to a ColdFusion Event Gateway.

Other departments’ implementation of this process will be different, so I couldn’t force an implementation in the abstract class.

Additionally, in the application I was using for testing, I wanted to have two categories of messages:

1. Messages intended to be produced and consumed by individual clients
2. Messages intended to be consumed by any client

To that end, I created another abstract class at the application level that simply passed along specific a Flex Producer and Consumer for each category. I then created two concrete classes. One specified the Producer and Consumer for the application, and the other specified the Producer and Consumer for that individual client.

Here’s a diagram showing the architecture.

Generic Messaging Architecture

So far, it’s working great in the development test lab, but I still need to get with my colleagues for a group code review and hopefully fine tune the code and the architecture a bit more.

At work, we’re investigating using ColdFusion Event Gateways to handle certain complex types of communication between our Flex user interfaces and ColdFusion, so yesterday I jumped on Google and started researching and ran into some roadblocks. However, after some monkeying around and more poring over of documentation and articles, I finally got a basic example working.

As usual, now that I’ve discovered how to set up a somewhat advanced feature of a platform, I’m sharing the knowledge in a comprehensive article. The documentation available for getting ColdFusion and Flex to communicate via event gateways was scattered, incomplete, or incomprehensible. In many of the articles, there were a lot of words, but little or no code, which does not help developers at all. Don’t tell me how it works, SHOW me how it works.

2   Creating a ColdFusion Listener Component

The listener component is the ColdFusion code that will receive any message sent from your Flex client via the DataServicesMessaging gateway type in your ColdFusion admin (more on that later). The basic structure is simple – just need one method named onIncomingMessage() in your component.

Create a file called InterceptFlex.cfc somewhere in your webroot and put the following code in it.

InterceptFlex.cfc

<cfcomponent output="false">
   <cffunction name="onIncomingMessage" returntype="any">
         <cfargument name="event" type="struct" required="true" />

	</cffunction>
</cfcomponent>

3   Setting Up Your Event Gateway

Now you need to go to your ColdFusion Administrator so that you can create an event gateway that specifies that any message coming in on a certain destination will be sent to the InterceptFlex component.

3.1   Destinations

There is a destination already set up for you in the \WEB-INF\flex\services-config.xml file (or \WEB-INF\flex\messaging-config.xml file if you are running BlazeDS) called ColdFusionGateway, and we’re just going to use that for this example.

You just need to make one change for this sample application to work. Open up the XML file and find the ColdFusionGateway destination. In the <properties> block add the following server property:

<properties>
   <server>
      <durable>false</durable>
      <allow-subtopics>true</allow-subtopics>
   </server>

   ...
</properties>

3.2   Gateway Setup

Now, go to the Gateway Instances section of your ColdFusion Administrator and start creating a gateway.

1. The gateway ID can be anything, and you can just call it “test” for now.
2. Select DataServicesMessaging as the type.
3. The CFC path is the physical path to your InterceptFlex.cfc file you created.
4. the configuration file is located in the \WEB-INF\cfusion\gateway\config\ directory, and you can use the one already set up named flex-messaging-gateway.cfg. So find that file and enter the path here.
5. Click the Add Gateway Instance button.
6. Start the gateway instance you just created.

4   Sending Messages From Flex

This application is a slight modification from the code provided in the Adobe article Introduction to the Flex Message Service, which I highly recommend you read if you’re new to Flex Messaging.

Create a new Flex application called Chat and paste this code into the Chat.mxml file. This code will connect to the ColdFusionGateway destination and send the message object to ColdFusion. ColdFusion, in turn, uses the event gateway instance we set up to send that object to the onIncomingMessage() method of the InterceptFlex.cfc component.

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
    pageTitle="Simple Flex Chat" creationComplete="createChat()">

    <mx:Script>
        <![CDATA[

        import mx.messaging.Consumer;
        import mx.messaging.Producer;
        import mx.messaging.events.MessageAckEvent;
        import mx.messaging.events.MessageFaultEvent;
        import mx.messaging.events.MessageEvent;
        import mx.messaging.messages.AcknowledgeMessage;
        import mx.messaging.messages.AsyncMessage;
        import mx.utils.ObjectUtil;

        private var chatPublisher:Producer;
        private var chatSubscriber:Consumer;

        private function createChat():void
        {
            chatPublisher = new Producer();
            chatPublisher.addEventListener(MessageFaultEvent.FAULT, onProducerFault);
            chatPublisher.destination = "ColdFusionGateway";

            chatSubscriber = new Consumer();
            chatSubscriber.addEventListener(MessageAckEvent.ACKNOWLEDGE, onConsumerAck);
            chatSubscriber.addEventListener(MessageEvent.MESSAGE, receiveChatMessage);
            chatSubscriber.destination = "ColdFusionGateway";
            chatSubscriber.subtopic = "simpleChat";
            chatSubscriber.subscribe();
        }

        private function onProducerFault(faultEvent:MessageFaultEvent):void
        {
            output.text += "[Error: " + faultEvent.message.toString() + "]\n";
        }

        private function onConsumerAck(ackEvent:MessageAckEvent):void
        {
            output.text += "[Got ack for subscribe or unsubscribe operation]\n";
        }

        // Note: these are the event-handling methods from above, now moved into the separate source file:

        private function sendChatMessage():void
        {
            var msg:AsyncMessage = new AsyncMessage();
            msg.body = input.text;
            msg.headers["username"] = "Me";
            msg.headers["gatewayid"] = "test";
            chatPublisher.subtopic = "simpleChat";
            chatPublisher.send(msg);
            input.text = "";
        }

        private function receiveChatMessage(msgEvent:MessageEvent):void
        {
            var msg:AsyncMessage = AsyncMessage(msgEvent.message);
            output.text += msg.headers["username"] + ": " + msg.body + "\n";
        }
        ]]>
    </mx:Script>

    
    <mx:Panel title="Simple Flex Chat">
        <mx:TextArea id="output" width="500" height="220" />
        <mx:TextInput id="input" width="500" enter="sendChatMessage()" />
        <mx:ControlBar horizontalAlign="center" width="500">
            <mx:Button id="clearBtn" label="Clear" click="output.text =''" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

5   Respond to the Flex Client

Now that ColdFusion has received the message, we’re simply going to respond back. You can enhance this to do anything you wish – send out emails, update database tables, log messages – but for now we’re just going to send a message back that let’s the Flex client know that the mechanism works.

<cfcomponent output="false">
   <cffunction name="onIncomingMessage" returntype="any">
      <cfargument name="event" type="struct" required="true" />

      <cfscript>
      x = structNew();
      x.body = "hello right back at ya";
      x.destination = "ColdFusionGateway";
      x.headers = structNew();
      x.headers['username'] = "System";
      x.headers['DSSubtopic'] = "simpleChat";
      x.lowercasekeys = "yes";
      </cfscript>

      <cfreturn x />
   </cffunction>
</cfcomponent>

One of those esoteric details that took me forever to find out was how to apply a subtopic to a message in ColdFusion. In Flex, it’s absurdly simply, you simply say message.subtopic = “myTopic”;, but in ColdFusion, you have to set a header key named DSSubtopic with the topic name (see above).

6   Conclusion

To be safe, restart your ColdFusion instance, then fire up the simple Flex chat app and type in a message. After a few seconds, you will receive a message from System in the history box.

First, let’s look at the code you need. The Ext stylesheet and the ext-all.js library. Then you’ll need your own, custom interaction code. My naming convention is to start with interaction and then the page to which the code applies.

<link href="css/ext-all.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/interaction.example.js"></script>

This article is going to focus on the HTTPProxy code for the autocomplete feature. The one argument you need is URL, and it value will be the name of the file that is actually going to perform the query and return the results. This code is simply creating a connection to a page that will be used when the user types in a search string.

In the example I’m pulling from, I’m searching against a list of facilities for the company.

facilityProxy = new Ext.data.HttpProxy({url: 'liveQueries/facilities.cfm'});

When the user types in a search string, Ext will then use the HTTPProxy to call facilities.cfm with a URL variable named query that contains the search string. Therefore, if the user typed in ‘PHIL’, the proxy URL would be liveQueries/facilities.cfm?query=PHIL.

Now let’s look at the facilities.cfm code. First, we have to capture the query variable being passed to the page by Ext, which can be done simply with a <cfparam> tag. Then we execute our query. Once we have the resultset, we’ll need to serialize it. I like JSON serialization, so I used the CFJSON code from Thomas Messier, Jehiah Czebotar, and others.

<cfsetting enablecfoutputonly="true">

<cfparam name="query" default="">

<cfquery name="facilities" datasource="#datasource_name#">
select unique facility_no, facility_legal_name
from chg_facility
where (REGEXP_LIKE(facility_no,'#query#','i') OR REGEXP_LIKE(facility_legal_name,'#query#','i'))
order by facility_no asc
</cfquery>

<cfscript>
jsonBean = createobject("component","webapps.charm.model.ajax.JSON");
jsonEncodedCriteria = jsonBean.encode(data=facilities, queryFormat="array");
writeOutput(jsonEncodedCriteria);
</cfscript>

<cfsetting enablecfoutputonly="false">

Ok, so now we’ve got a JSON-serialized query. What do we do with it? Well, Ext just happens to have a built-in JSON reader. Just create a new JsonReader object, tell it what node contains the data (in our case, the node name is data) and optionally provide a totalProperty argument that contains the total number of records returned.

You then provide a defintion of what a single record of data consist. You can define a seperate object called a Record….

facilityRecord = Ext.data.Record.create([
    {name: 'facility_no',         	type: 'string'},
    {name: 'facility_legal_name',	type: 'string'}
]); 

facilityReader = new Ext.data.JsonReader({
    root: 			"data",
    totalProperty:	"recordcount"
}, facilityRecord);

Or just do it inline if the record is simple enough.

facilityReader = new Ext.data.JsonReader({
    root: 			"data",
    totalProperty:	"recordcount"
}, [
	{name: 'facility_no',         	type: 'string'},
	{name: 'facility_legal_name',	type: 'string'}
]);

Alright, so we’ve got a proxy object to facilities.cfm that will perform the query on the user’s search string and return JSON-serialized data. We’ve defined the structure of each record, and use a built-in JSON reader to parse the results.

Lastly, we need to populate a data Store with the deserialized data set that we’ve retrieved. We simply provide it with the name of the proxy we’ll be using and which reader it should use to deserialize the data.

facilityStore = new Ext.data.Store({
    proxy: facilityProxy,
    reader: facilityReader
});

You can also define each element inline instead of creating a separate variables for each object. Here’s an example:

new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url: 'liveQueries/facilities.cfm'}),
    reader: new Ext.data.JsonReader({
        root: 			"data",
        totalProperty:	"recordcount"
    }, [
    	{name: 'facility_no',         	type: 'string'},
    	{name: 'facility_legal_name',	type: 'string'}
	])
})

Now that’s we’ve got some interaction code running, let’s start creating the actual ComboBox. Create a simple HTML file and place an input element on the page with a unique name.

<input type="text" size="20" id="facilitySearchField">

Then, back in your interaction code, let’s create a ComboBox instance and tell it to use the data store that we’ve already defined.

var search = new Ext.form.ComboBox({
    store: facilityStore,
    minChars:2,
    itemSelector: 'div.search-item',
    tpl: new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '{facility_no} - {facility_legal_name}',
        '</div></tpl>'
    ),
    onSelect: function(record){
        // What you want to happen when the enter selects a record (or hit the ENTER key)
    	// Example (redirect to another page):
        //    document.location.href = 'showFacilityDetails.cfm?facilitySelected&fid=' + record.data.facility_no;
    }
});

// Apply the comboBox to the &lt;input&gt; element in our HTML page.
search.applyTo('facilitySearchField');

Summary

HTML Code (example.htm)

<html>
<head>
    <link href="css/ext-all.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript" src="js/interaction.example.js"></script>
</head>

<body>
    <input type="text" size="20" id="facilitySearchField">
</body>
</html>

Javascript Code (interaction.example.js)

facilityProxy = new Ext.data.HttpProxy({url: 'liveQueries/facilities.cfm'});

facilityRecord = Ext.data.Record.create([
    {name: 'facility_no',         	type: 'string'},
    {name: 'facility_legal_name',	type: 'string'}
]); 

facilityReader = new Ext.data.JsonReader({
    root: 			"data",
    totalProperty:	"recordcount"
}, facilityRecord);

facilityStore = new Ext.data.Store({
    proxy: facilityProxy,
    reader: facilityReader
});

var search = new Ext.form.ComboBox({
    store: facilityStore,
    minChars:2,
    itemSelector: 'div.search-item',
    tpl: new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            '{facility_no} - {facility_legal_name}',
        '</div></tpl>'
    ),
    onSelect: function(record){   }
});
search.applyTo('facilitySearchField');

ColdFusion Code (facilities.cfm)

<cfsetting enablecfoutputonly="true">

<cfparam name="query" default="">

<cfquery name="facilities" datasource="#datasource_name#">
    // Perform search based on user's search string (query parameter)
</cfquery>

<cfscript>
jsonBean = createobject("component","webapps.model.ajax.JSON");
jsonEncodedCriteria = jsonBean.encode(data=facilities, queryFormat="array");
writeOutput(jsonEncodedCriteria);
</cfscript>

<cfsetting enablecfoutputonly="false">