RIA Survey

Kristen Schofield is asking for help from developers, by filling out a brief survey on Rich Internet Application development. So, if you're doing RIA development with ColdFusion, Flex, JavaScript, or any other technology, please take a few minutes to fill out her survey.

ExtJS 2.2 Released

As many of my readers already know, I am a huge fan of ExtJS, the wildly popular JavaScript cross-browser component and Ajax library. ExtJS 1.1 is the underlying library used by ColdFusion 8 in it's new Ajax controls, so I latched on to the concept of rapid application prototyping and then extending it through custom ExtJS development.

Well, Monday the ExtJS team released 2.2. Much more than a minor dot release, 2.2 addresses several bug fixes, nice increases in perfomance, better support for Firefox 3, and several new components and examples.

Some of the new components include CheckBoxGroups and RadioGroups for forms, a new History object for managing the back button (a common issue in RIAs), a new FileUploadField, and even an XMLTreeLoader to automatically create Tree components from an XML Document. There are several new examples, to show developers how to use these new components, better information on how to implement Drag and Drop, and more.

ExtJS 2.2 is fully backwards compatible with the 2.1 release. I tested several applications last night, seeing definite speed increases. Really well done. (There also appears to be some speed improvements when implementing ExtJS within Adobe AIR applications as well, from my testing.)

I'll have a lot more info on ExtJS coming in the near future, so watch this space;)

Caught By The Bug

The dreaded BlogCFC curse. After 30 days without a post you see the message 'Sorry, no post' (more or less).

I'm busy. Way busy. Several side projects, fun at work with servers, and a few hush-hush things...I'm beat. I can't go into a ton of particulars on anything, but there are things coming. I am working on a custom asset manager written in ColdFusion and Ext, that I'll be open sourcing, but it's taken a side burner for now. Ext is a blast, and I hope to continue to create and release Ext custom components, but I will always be using ColdFusion for my server-side code examples.

Speaking of code, I still owe everyone my sample code from my WebManiacs Presentation. With all this activity, I am way behind the eight ball on rolling some of this up. I hope to get it out sometime within the week. I'm also hoping to get a chance, soon, to re-record the presentation. I had done it once before WebManiacs, for the Nashville ColdFusion User Group, but the recording was a wash. We'll try to get that scheduled soon, and get it out there for everyone.

And, speaking of NCFUG, Mark Mandel is presenting Thursday night, July 31st on Transfer. Details can be found on the NCFUG Meeting page.

That's all for now. I'll try not to let it go so long between posts this month.

WebManiacs Follow-Up

After WebManiacs, I thought it would be good to jot down some thoughts on conferences, and ColdFusion development in general. I was asked to speak at WebManiacs, which was my first conference speaking engagement, and although my session was somewhat small (last session that day), I had a great group who seemed to really enjoy my presentation, with a lot of questions, comments, and discussion afterwards. All in all a lot of fun. That being said, the conference was... lacking a little. Now, in all fairness, it was the first of it's kind, the first for FigLeaf (of this size), and a learning experience for everyone involved.

[More]

ColdFusion 8 Json Return Format and ExtJS

Yes, I am really enjoying getting back into JavaScript. The language really has changed since the days I was heavier into it (1998 thru 2001, maybe), so it's great to see how much it has grown. I feel like I've been ignoring an old friend.

[More]

Why Can't I Comment?...

I've been so head down, on several projects professional and personal, that I only just noticed a few weeks worth of error messages in Cutter's Crossing's email box. A very odd error about missing a captcha-hash-variable kinda thing (don't have one handy). So, I get my next door co-worker to pull up my blog and ask him to post a comment, any comment. Low and behold, in place of the captcha there was a broken image icon. That wonderful clear box with the red X going through it, that we all know and love. Simply reinitializing BlogCFC took care of the issue, but I realize I've missed out on valuable feedback.

If you're reading this, and you tried to comment earlier, please try again, and I'm sorry for the trouble. I'll try to keep a more vigilant eye.

In the meantime, I'm looking for some really outstanding (public) examples of a drag-and-drop page content editor interface. Some experimenting with some of the Ext (2.1) sample code says I should be able to do it, but I'm looking to see some clear cut, and tested, solutions. BTW, if you haven't looked at the extended examples that they put out with the 2.1 update, then you should. There's some very nice stuff in there, particularly dealing with layouts.

WebManiacs 2008 Registration Open

In a previous post I mentioned that I'll be speaking in the CFManiacs portion of the WebManiacs Conference in Washington, DC, May 19 - 23. Registration for the conference is now open, with a spectacular lineup of speakers on very high-end, focused topics, covering ColdFusion, Flex, and AIR. Here's the official line from FigLeaf:

The WebManiacs 2008 conference schedule has been finalized and registration is open. Early bird pricing ends Jan 31. Consisting of a two-day ColdFusion conference ("CFManiacs") coupled with a three-day Flex conference (FlexManiacs), hosting over 70 speakers and 130 distinct topics (some of which are hands-on), WebManiacs promises to have the most comprehensive coverage of Flex, AIR, and ColdFusion at the lowest price. Seating is limited, so folks should register early in order to get into the more popular sessions.

CF8 Ajax Grid: Showing the TotalRecordCount

This morning, Paul Stewart submitted an interesting question to the CF-Talk List:

"Hi, I have been using the CFgrid tag in CF8 (format HTML, bound to a cfc), and i have got it do almost all that i need it do (see below). Except that i don't know how to get access to the TOTALROWCOUNT figure that i can see in the debugger returned from the CFC , and also be able to display that figure either on the bottom of the grid itself (using ext.toolbar???), or even above it on the page using another ajax method??.

I need to do this show the user amount of records returned from his/her search. i.e 'your search returned x number of records.' From reading Ray Camden's blog I know i have to use the underlying Ext library that the cfgrid tag is based on, and i have used his solution to format some columns in the grid (nice one Ray). But i am not really getting anywhere (hopelessly bamboozled) with the records returned figure...."

This is a great question! And so easy to implement using the underlying ExtJS 1.1.1 component architecture of the ColdFusion 8 Ajax controls. The grid component already knows what the beginning and ending rows are for the page, and the total number of rows, so it's just a matter of getting them to display on the PagingToolbar. Paul had included a little code in his post, the primary piece of which (as far as we're concerned) is his formatgrid() function:

view plain print about
1formatgrid = function() {
2 mygrid = ColdFusion.Grid.getGridObject('ad');
3
4 cm = mygrid.getColumnModel();
5 cm.setRenderer(3,myf);
6 cm.setRenderer(5,myf);
7
8 mygrid.reconfigure(mygrid.getDataSource(),cm);
9}

Basically he has most of the pieces that he needs already. He needs a reference to his data.Store object, which we'll add right after he gets his grid instance:

view plain print about
1...
2    mygrid = ColdFusion.Grid.getGridObject('ad');
3    ds = mygrid.getDataSource();
4    ...

Then, after his renderers, but before his reconfigure(), we'll get a reference to his grid's FooterPanel to redefine the PagingToolbar:

view plain print about
1...
2    cm.setRenderer(5,myf);
3    // Get the Footer
4
5    var gridFoot = mygrid.getView().getFooterPanel(true);
6    // Create a new Paging Toolbar
7
8    var paging = new Ext.PagingToolbar(gridFoot,ds,{
9        pageSize:25, //number of records displayed in grid
10
11        displayInfo:true,
12        displayMsg:'Displaying records {0} - {1} of {2}',
13        emptyMsg:"No records to display"
14    });
15    
16    // reconfigure the grid
17
18    mygrid.reconfigure(ds,cm);
19    ...

Hey! Reload the page and what do you get? An adjusted toolbar, giving Paul exactly what he was looking for, the current record from - to and the total number of records returned. Though I've used this before, I wanted to note that this code is almost an exact copy of the example code included in the ExtJs 1.1.1 API documentation. There is a ton of untapped potential within the underlying Ext framework. With a little research you may be surprised what you can accomplish.

ExtJS 2.0 Grid Gotcha

I recently upgraded all of my former ExtJS code to utilize the updated 2.0 library. There are a lot of fantastic changes and additions here, but I did run into one or two snags. In a previous post I showed how to use Event Handlers and Item Renderers with the ColdFusion 8 Ajax implementation of the ExtJS 1.1.1 data grid. It works very similarly with a straight (non-CF) implementation, whereby I had defined an unbound column, in my ColumnModel, and applied a renderer to it so that an icon would appear with an onclick event attached to the cell click. It's a very straight forward process, that immediately broke with the 2.0 library. It took me a little bit of playing around, but I finally discovered what appears to be either a bug in the library, or a glitch in the documentation.

What made this column previously 'unbound' was the fact that no dataIndex was set to the column. It wasn't required. Acoording to the 2.0 documentation, the attribute is still supposed to be optional. However, when trying this with 2.0, I found that I would continually get an error. Only after duplicating my dataIndex (I applied my ID query column to the dataIndex, the same as my ID column), and then using the renderer to overwrite, did I finally get my working grid. It's a bit of a hack, but it did the job.

It's a small gotcha, but a gotcha none the less, so I wanted to let ya'll know. As I said before, there are some fantastic changes in the new 2.0 implementation, and already some nice plugins being developed by the community. Well worth taking a peek under the covers.

Ask Cutter: Calling functions when paging the CF8 DataGrid

Yesterday, Mischa posted the following comment on my post on CF8 Ajax Grid: Renderers and Events:

Hi Steve, thank you for this example and your explanation! Do I understand correctly that init will fire once? Is there a way to fire init or any other function when the user pages through the grid using the page forward button? Thanks! Mischa.

Great question! Yes, to my knowledge the init() method is only called once. And, chances are, you really want it to only be called once. However, when the grid is initialized, and on every paging request, the data store runs it's load() method. The data store object, one of the underlying ExtJS pieces of the data grid, has a publicly available event that you can listen for, 'load'. I would go something like this.

view plain print about
1reportGrid = function(){
2    grid = ColdFusion.Grid.getGridObject('reportsGrid');
3    cm = grid.getColumnModel();
4    ds = grid.getDataSource();
5    cm.setRenderer(2,redBold);
6
7     var gridHead = grid.getView().getHeaderPanel(true);
8 var tb = new Ext.Toolbar(gridHead, [{
9 text: 'Add Art',
10 handler : showRecWin
11 }]);
12
13    grid.reconfigure(ds,cm);
14
15    ds.on('load',function(){alert('it just loaded the Data Store')});
16}

It's that last line that's the kicker. What I've done here is used the data store's on() method to assign an Event Listener to the 'load' event, with my own custom function. This will now kick off with whenever the data store calls the load() method, which happens on initialization, as well as each paging request (forwards or backwards).

There is a wealth of available knowledge, for interacting with these components, that is available in the ExtJS 1.1 API documentation. Looking at their online examples gives you an idea of how these components are built and interact, and knowing that can point you to the API documentation that will help you get the job done.

Previous Entries / More Entries