These three Javascript libraries are at the core of how I build fun, well-organized, and easy to maintain web applications. Each one serves a different purpose:

• jQuery – The best at DOM selection, manipulation and searching
• Ext – Makes all my little widgets look great and fun for the users
• ajaxCFC – Handles calls to my business logic and serialization of data

I’ll start off with a nice example of how these three libraries play well together and can make an otherwise complicated action very simple and easy to write.

This code has three pieces of functionality. I’m using the jQuery Datepicker on my page, and when the user selects a date from the calendar, I want the database to immediately be updated with the date chosen. If the method fails, throw up a nice message box with a failure message and ask the user to try again.

// Use jQuery to bind the dataSelected event of the jQuery DatePicker
$('#requestDueDate').bind('dateSelected',function(e, selectedDate, $td){
        // Use ajaxCFC to call the updateRequestDates() function of the Request component
	$.AjaxCFC({
		url: "model/ajax/request/Request.cfc",
		useDefaultErrorHandler: false,
		method: "updateRequestDates",
		data: { 'request_hdr_seq_no': request_hdr_seq_no,
			'request_due_date': selectedDate.asString(),
			'test_completion_date':$("#testCompletionDate").val() },
		timeout:30000,
		success: submitRequestCheck,
		error: function(results) {
                        // If the call fails, throw up an Ext message box to alert the user
			Ext.MessageBox.alert('Update Failed', "Failed to update the request due date. Please try again.");
			$('input#testCompletionDate').val("");
		}
	});
});

All I was required to do was write 14 lines of code. Now, I can’t even imagine having to write this code without the use of the Big 3.

Now for one of my favorite features of this site (it’s actually a boring feature, but how I implemented it is cool).

This is just a simple note feature where users can record any pertinent information about the work they are performing. I’m using the Ext Accordion Widget to display all past notes. You can see how the user can expand and contract each note item – not really needed, but never hurts to wow the users a little.

This particular page was written to operate as a true application. Any changes to the UI are immediately written to the database via AJAX calls. The UI is then updated when the operation completes, and the user can continue working while several tasks are being executed. No page reloads at all.

So when they add a note, it must be inserted into the database, and the Accordian object must have a new panel added to it, with the new text inserted inside.

I’ll admit, it stretched all my capabilities and imagination for Javascript programming. All in all, it took over 3 days of trying different things, and research, to get it to work.

First, I had to include the required features of the libraries.

<script type="text/javascript" src="js/jquery.AjaxCFC.js"></script>
<script type="text/javascript" src="js/json.js"></script>

<script type="text/javascript" src="js/ext-buttons.js"></script>
<script type="text/javascript" src="js/ext-layout.js"></script>
<script type="text/javascript" src="js/Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="js/Ext.ux.Accordion.js"></script>

^{*This adds up to 300k of jQuery/Ext Javascript libraries.}

Then, I build the <div> element that will be used to display the dialog and the accordion panels

<div id="NoteModalDialog">
	<div class="x-dlg-hd">Request Notes</div>
	<div class="x-dlg-bd">
       	<div class="x-dlg-tab" title="Notes">
			<div id="RequestNoteForm"></div>
			<div style="font-size:1.1em; font-weight:800;">Previous Notes</div>
			<div id="acc-ct" style="width:100%; height:200px">
				<cfloop query="requestNotesQuery">
					<cfoutput>
					<div id="panel-#currentRow#">
						<div>
							#first_name# #last_name# - #setup_date#:
						</div>
						<div>
							<div class="text-content">#note_txt#</div>
							<div style="border-bottom:5px solid white;"></div>
						</div>
					</div>
					</cfoutput>
				</cfloop>
			</div>
		</div>
	</div>
</div>

Then I instantiate the accordion object and build all the panels with previous notes

$(document).ready(function(){
	// Create accordion to hold previous notes in note popup
	var accordion = new Ext.ux.Accordion('acc-ct', { height:400,independent:true});

	// Create a panel for each previous note
	<cfloop query="requestNotesQuery"><cfoutput>
		var panel#currentRow# = accordion.add(new Ext.ux.InfoPanel('panel-#currentRow#', {collapsed:false}));
	</cfoutput></cfloop>
}

Then, of course, I need my wonderful Javascript object that handles building the dialog, saving the note, and loading of previous notes back into the UI/DOM.

It first builds a dynamic Ext form (which includes validation).

var noteForm = new Ext.form.Form({ labelWidth:25 });
var noteText = new Ext.form.TextArea({
	fieldLabel: 'Note',
	name: 'noteText',
	width:375,
	allowBlank:false,
	grow:true,
	growMax:200,
	emptyText:"Enter your request notes here..."
});
noteForm.add(noteText);

Then using ajaxCFC, I insert the data into database

$.AjaxCFC({
	url: "model/ajax/note/Note.cfc",
	useDefaultErrorHandler: false,
	method: "add",
	async:false,
	data: { 'seq_no': request_hdr_seq_no, 'note_type':'REQUESTHDR', 'note_txt': noteText.getValue() },
	timeout:30000,
	success: function(results) {
		// Reset the note field to blank
		noteText.setRawValue("");

		{{ This nested ajaxCFC call code shown below }}
	},
	error: function(results) {
		Ext.MessageBox.alert('Save Failed', results.responseText);
	}
});

Upon success of the insertion of the data, update the UI by adding a panel to the Accordion object with the new note inside.

// Return all notes from the database for this request
$.AjaxCFC({
	url: "model/ajax/request/Request.cfc",
	useDefaultErrorHandler: false,
	method: "getAllRequestNotes",
	async:false,
	data: { 'request_hdr_seq_no': request_hdr_seq_no },
	timeout:30000,
	success: function(results) {
		// Empty out the current accordion object and re-populate it with a panel for each note
		var panel = new Object();
		var accordion = new Ext.ux.Accordion('acc-ct', { height:'400', independent:true });
		$("#acc-ct").empty();

		for(i=0; i<results.NOTECOUNT;i++) {
			$("#acc-ct").append('<div id="panel-' + i + '"><div>' + results.PANELS[i].FIRST_NAME + ' ' + results.PANELS[i].LAST_NAME + ' - ' +    results.PANELS[i].SETUP_DATE + '</div><div><div class="text-content">' + results.PANELS[i].NOTE_TXT + '</div></div></div>');
			panel[i] = accordion.add(new Ext.ux.InfoPanel('panel-'+i, {collapsed:false}));
		}
	},
	error: function(results) {
		Ext.MessageBox.alert('UI Update Failed', "Failed to update Notes popup with latest note.");
	}
});

I put it all together, and I get a self-documenting, elegant Javascript object that handles user notes.

// Create the object that will be used for the Request Notes popup
var requestNotesEdit = function() {
	var dialog;
	var noteForm = new Ext.form.Form({ labelWidth:25 });
	var noteText = new Ext.form.TextArea({
		fieldLabel: 'Note',
		name: 'noteText',
		width:375,
		allowBlank:false,
		grow:true,
		growMax:200,
		emptyText:"Enter your request notes here..."
	});
	noteForm.add(noteText);

	return {
		init : function() { this.buildDialog(); },
		saveData : function() {
			if (noteForm.isValid()) {

				$.AjaxCFC({
					url: "model/ajax/note/Note.cfc",
					useDefaultErrorHandler: false,
					method: "add",
					async:false,
					data: { 'seq_no': request_hdr_seq_no, 'note_type':'REQUESTHDR', 'note_txt': noteText.getValue() },
					timeout:30000,
					success: function(results) {
						// Reset the note field to blank
						noteText.setRawValue("");

						// Return all notes from the database for this request
						$.AjaxCFC({
							url: "model/ajax/request/Request.cfc",
							useDefaultErrorHandler: false,
							method: "getAllRequestNotes",
							async:false,
							data: { 'request_hdr_seq_no': request_hdr_seq_no },
							timeout:30000,
							success: function(results) {

								// Empty out the current accordion object and re-populate it with a panel for each note
								var panel = new Object();
								var accordion = new Ext.ux.Accordion('acc-ct', { height:'400', independent:true });
								$("#acc-ct").empty();

								for(i=0; i<results.NOTECOUNT;i++) {
									$("#acc-ct").append('<div id="panel-' + i + '"><div>' + results.PANELS[i].FIRST_NAME + ' ' + results.PANELS[i].LAST_NAME + ' - ' +    results.PANELS[i].SETUP_DATE + '</div><div><div class="text-content">' + results.PANELS[i].NOTE_TXT + '</div></div></div>');
									panel[i] = accordion.add(new Ext.ux.InfoPanel('panel-'+i, {collapsed:false}));
								}
							},
							error: function(results) {
								Ext.MessageBox.alert('UI Update Failed', "Failed to update Notes popup with latest note.");
							}
						});

					},
					error: function(results) {
						Ext.MessageBox.alert('Save Failed', results.responseText);
					}
				});

				dialog.hide();
			}else{
				Ext.Msg.alert('Field Required', 'Please enter in some note text before submitting.');
			}
		},
		buildDialog : function() {
			noteForm.render('RequestNoteForm');
			dialog = new Ext.BasicDialog("NoteModalDialog", {
				modal:true,
			    width:450,
			    height:350,
			    shadow:true,
			    minWidth:400,
			    minHeight:300,
			    animateTarget:'requestNotes'
			});
			dialog.addKeyListener(27, this.hideWindow, this);
	        dialog.addButton('Save', this.saveData, this);
	        dialog.addButton('Cancel', this.hideWindow, this);
		},
		showWindow : function() { dialog.show(); },
		hideWindow : function() { dialog.hide(); }
	};
};

When I start developing a new app that uses the Ext library, I first just include everything because it allows for rapid development in the initial stages. I never have to worry about if I’m including the right features. However, as the app matures – queries are added, UI is strengthened, configuration is complexified (yes, I said it) – the pages start to bog down from the massive 500k include.

Splitting the Ext features into individual files allows for two things:

1. Control – You have fine grain control over what code is included, allowing for smaller downloads
2. Flexibility – Having each feature of Ext in its own module allows you to only include what is needed to create unique UI elements

Here’s an example of my Ext libraries for a particularly heavy page:

<script type="text/javascript" src="js/ext-core.js"></script>
<script type="text/javascript" src="js/ext-buttons.js"></script>
<script type="text/javascript" src="js/ext-data.js"></script>
<script type="text/javascript" src="js/ext-dialogs.js"></script>
<script type="text/javascript" src="js/ext-form.js"></script>
<script type="text/javascript" src="js/ext-form-combo.js"></script>
<script type="text/javascript" src="js/ext-layout.js"></script>
<script type="text/javascript" src="js/ext-quicktips.js"></script>
<script type="text/javascript" src="js/Ext.ux.InfoPanel.js"></script>
<script type="text/javascript" src="js/Ext.ux.Accordion.js"></script>

This is stripped from the most feature-rich Ext page I’ve developed to date, and by splitting things out, the JS is down to 380k from 550k. Still large, but significantly smaller than just including everything.

This is easily done by using the Build Your Own Ext page. When you want to add a specific piece of functionality, simply use that page to download it, strip out the core code so you’re left with only the objects you need, and include it in your page.