Cutter's Crossing - ExtJS

Introducing Sencha

Thu, 17 Jun 2010 17:31:00 -0400

Great things are coming. Great things are here! On June 14^th, Ext JS LLC rebranded as part of their announced partnership with the principles of the JQTouch and Raphael projects, creating Sencha. The Ext JS library is still one of their major offerings, but they have also created Sencha Labs as a repository of various Open Source Projects under the MIT License (Like JQTouch, Raphael, and Ext Core). Great things were on the way! Having David Kaneda (JQTouch) and Dmitry Baranovskiy (Raphael) join forces with the Ext JS crew is huge, and really plays well in understanding a series of recent blog posts around HTML5, CSS3, and what HTML5 means to developers today. But, it gets better. This morning, Sencha launched their first joint product in public beta, Sencha Touch. Sencha Touch is a cross-platform mobile application framework built to leverage HTML5, CSS3, and JavaScript. It gives you the same sort of consistent API that you've come to expect from the Ext JS team, with a familiar syntax, great documentation, user forums for support, and many samples included with the download to help you learn. I've had the opportunity to preview this code for a while, and it is outstanding work. There will be some interesting apps to come out of this. The future looks bright for Sencha, and I can't wait to see what they do next. Judging from their post on the rebranding, my prediction are changes to ExtDesigner (possibly to become SenchaDesigner), that would allow a developer to build both Ext JS and Sencha Touch interfaces from the same tool. My guess. (Man, that would be really cool.)

My CF + ExtJs Preso for cf.Objective() 2010

Sat, 24 Apr 2010 08:50:00 -0400

Attached to this is my slide deck and sample code from my ColdFusion + ExtJs presentation here at cf.Objective() 2010. Overall it seemed to go really well, despite the typical technical difficulties, and though Ray said I needed to be a little more introductory (Thanks Ray. I appreciate the feedback.) I heavily commented the JavaScript in my source code, so hopefully that will help to fill in the gaps for people. If anyone has any questions, feel free to use the contact link at the bottom of the page. I want to shout out to Aaron Conran of ExtJs, for providing me with a license for their new ExtDesigner to giveaway in my presentation. I pinged him last minute on this, and he really came through (Hope you like it Lance. Drop me your info to give back to Aaron.) For those who haven't checked it out yet, it's a fantastic tool, really well done, and more than worth the small price tag on it. On a side note, I'm using a "work-in-progress" version of CFQueryReader in this sample. I'm in the process of refactoring to support some advanced features of Ext.Direct, and the new version will only be compatible with 3.2 and above. When I put it into SVN I'll add some notes on which revision is the cutoff for previous versions of ExtJs. Update: I've added notes to the readme.txt file of the sample download with instructions on how to make the examples work in ColdFusion 8 as well.

I Am Speaking at cf.Objective() 2010

Wed, 06 Jan 2010 15:59:00 -0400

I'll be speaking on building applications with ColdFusion and ExtJs at cf.Objective 2010. I was very honored to be asked to submit a topic alongside so many fantastic speakers and developers. I'll post more as the details are refined.

ColdFusion Ajax and ExtJs Presentation Update

Wed, 23 Sep 2009 09:33:00 -0400

I've been asked to present to the KCDevCore on ColdFusion 9 Ajax and ExtJs. This will be an updated version of my ColdFusion Ajax presentation, with new content to cover the updates and new components presented in ColdFusion 9 and ExtJs 3.0. By request, I'm going to try to keep the slides to a minimum and get down to some code. That presentation will be next Tuesday, September 29th, at 7 PM CDT, and will be available via the KCDevCore Adobe Connect. For those who don't know (where have you been?), ColdFusion 9 is now in public beta on Adobe Labs.

CFQueryReader v1.2 - Critical Update Supporting ExtJS 3.x

Wed, 29 Jul 2009 16:04:14 -0400

I have updated CFQueryReader, addressing issues that had arisen with new builds of ExtJs 3.x. This new build should cover sporadic issues with loading a new Ext.data.Store. There is also a simple example of using Aaron Conran's DirectCFM Ext.Direct ColdFusion API stack. The CFQueryReader Example Site has been updated as well. You can update CFQueryReader from RIAForge.

Ext Js 3.0 is Finally Released!

Mon, 06 Jul 2009 23:08:00 -0400

Yes, Ext Js 3.0 has finally arrived! This long awaited update to the popular library has finally hit the download page as a production ready build (though the Release Candidates have been pretty stable as it is). There are many great enhancements to Ext, including an even more consistent underlying model (how could it get more consistent?), and some exciting new data marshalling features. A quick perusal of the updated Samples & Demos page gives us immediate insight into some of the new features that are available:

Row Editor Grid - for full record edits
Buffered Grid View - for faster rendering of large datasets
Tab Panel Scroller Menu - for Tab Panels with lots of tabs
Group Tabs - a vertical tab implementation
Charts - several different chart types
Check Tree - a tree view with a twist
HBox and VBox layouts
Toolbar Overflow
Toolbar Button Groups
ListView - a very lightweight grid implementation
Updated QuickTips

There's a lot more that you'll have to dig to see, like improved browser support, a better container model, and (experimental) ARIA support (for accessabiltiy). Some of the greatest enhancements come in the way of the data marshalling capabilities added via the new Ext Direct. With Direct, Ext is providing the remoting specifications so that anyone can write data marshalling services around their favorite backend language. Ext has even published Example Server Side Stacks as a jumping off point to beginning with data marshalling via Direct. [Side Note: Aaron Conran, the team lead on the Ext Js team, is a long time ColdFusion guy, and he wrote the example CF stack.) By configuring your Direct API, you can utilize data readers and writers (they're new!) easily, even passing multiple requests within a single Ajax request. [Another Side Note: CFQueryReader is fully functional with and without Direct.] One of the nicest features of this release is the backwards compatability. There are little to few changes that most will have to make, to upgrade their applications from 2.x to 3.0. And, it was announced, on a recent User Group Tour stop, that Adobe is including Ext Js 3.0 in ColdFusion 9. This opens up the possability of some very nice, new CFAjax components to come. All in all a fantastic release. I've had the opportunity to play with 3.0 for a while now, watching the SVN updates daily, and my hat's off to the Ext Js crew for another excellent release.

Ext JS 3.0 RC2 Released

Wed, 03 Jun 2009 11:53:00 -0400

The Ext JS team has announced the release of 3.0 RC2. This latest Release Candidate is considered to be very stable, with many new examples to show you how to do what you need to do. From someone that updates from the repository every day, I can tell you that these guys have been working hard to get 3.0 ready for full release, and there's a ton of new material there (in the examples) to learn from.

Placement of the PagingToolbar on a Grid

Fri, 22 May 2009 10:33:00 -0400

This morning I found I was courtesy copied by Ray Camden, on a reply that he was making to a message he had received from his Blog Contact form from Mike Knox. Mike was trying to find out if it was possible to place the PagingToolbar, used in cfgrid, at the top of the grid rather than the bottom. Ray had told Mike that he had Googled it and not found on obvious solution, and that he was CCing me for my feedback. Like any padawan, it's pretty humbling for me to be asked advice from the Jedi Master. I've been taking Ray's advice on ColdFusion since the 4.x days, so I try to be pretty diligent when he includes me in helping others with their queries. I've always held that the use of the CF Ajax components are primarily for rapid application prototyping. They are fantastic for putting up some very basic functionality, but when you need more advanced configuration it is then time to dig in, and go straight to Ext JS itself. Mike's question is a prime example of this. We have nearly no control over a cfgrid's configuration prior to render, and the configuration options that we do have (through the cfgrid and cfgridcolumn attributes) barely scratch the surface to what one can do with an Ext Grid. The PagingToolbar is a class object of Ext and, as such, you should be able to add it to any toolbar of a grid: top, bottom, or both. I fired up Eclipse, booted up my CF and Apache, and pulled up the Ext examples from my local copy of the latest 3.0 download. All of the examples that you can see in the Samples & Demos section of the Ext site are given to you in the download of the library, so that you can run them locally and pick them apart. So, my quest was on. I went to the Paging Grid Example, and examined the source code of the paging.js file. I quickly found the configuration object for the paging toolbar:


    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

The PagingToolbar instance is then applied to the Grid, placing the object in the 'bbar' (bottom bar) attribute:


        // paging bar on the bottom
        bbar: pagingBar

After seeing this in the online demo, I went to my local (3.0) demo to see if I could change it. The Ext team rewrote the demo for the upcoming 3.0 release, placing the instance initialization directly in the attribute:


        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })

So, I changed 'bbar' to 'tbar' (top bar) and reloaded the page. Success! The PagingToolbar was now in the top toolbar of the Grid, and fully functional. After reviewing all of this, I decided to go a step further. Could you have two separate PagingToolbar configs on the grid? One at the top and one at the bottom? So, I tried this:


        // paging bar on the bottom
        bbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        }),
        // paging bar on the top
        tbar: new Ext.PagingToolbar({
            pageSize: 25,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display",
            items:[
                '-', {
                pressed: true,
                enableToggle:true,
                text: 'Show Preview',
                cls: 'x-btn-text-icon details',
                toggleHandler: function(btn, pressed){
                    var view = grid.getView();
                    view.showPreview = pressed;
                    view.refresh();
                }
            }]
        })

That's part of what I love about development, I get to play, experiment, have some (geek) fun. After refreshing the page, I now had two toolbars, at both the top and bottom of the page. Both worked perfectly, and stayed in sync during paging. That's what I love about the Jack Slocum and the Ext Team, they think about things like having more than one paging bar and how they would need to stay in sync, and they've already written it in to the library. And so, on rare occasion, the student has the opportunity to become the master, though I'm sure there's still plenty more I can learn from Master Camden;)

CFQueryReader v1.1

Wed, 13 May 2009 14:08:00 -0400

A while back, Justin Carter contacted me about some updates he was making to the ColdExt, a wrapper for the Ext JS library for ColdFusion. He had been looking at my CFQueryReader, as a reader for ColdFusion's JSON data return, and had noticed that there was no support for the 'root' attribute that's associated with most JSON readers in Ext. CFQueryReader is specifically designed for use with Query objects of ColdFusion 8's native JSON return type. When I first wrote CFQueryReader, I was replacing the CFJsonReader with something better suited to the array structure used in the ColdFusion JSON return of a Query Object, and really did a one-for-one port. So, I took a deeper look at the issue Justin wanted resolved. I did a deep comparison of Ext's ArrayReader and JsonReader source code, following everything that was being accomplished. What I found was how it used an internal accessor method to pull certain information on demand. I was able to refactor the reader to now support all of the base level meta attributes that are currently available to the ArrayReader: id, root, successProperty, and totalProperty. In the previous version of CFQueryReader, when defining your fieldsets you were also required to uppercase the entire value of the column names. This is no longer a requirement either, although casing is important in identifying your 'root' and 'totalProperty' attributes. The download below includes the reader, as well as some sample code showing how to implement it. I also setup these sample in a subdomain to show it working (requires Firefox with Firebug for full effect). There is a fair amount of comment documentation directly within the CFQueryReader.js file. A big shout out to Justin, Adam Bellas, and a few others, for helping me out with the testing.

Ext.Direct: Details on Data Marshalling

Wed, 13 May 2009 09:48:00 -0400

One of the core focuses, in the development of Ext JS 3.0, is the marshalling of data services under a centralized location. The intent is to make for a more portable application, where you can have a single touch point for data I/O that could easily be switched from one platform to another. This is done through the new Ext.Direct package of classes, and many have been waiting on some detailed information on what it is and how to use it. This morning the Ext Blog got an update: Ext JS 3.0 - Remoting for Everyone. This explains Ext.Direct fairly well, even giving you a sample app to learn from, some sample code, links to some pre-constructed routers for several platforms, as well as a link to the Remoting Specification to write your own custom routers. Aaron Conran, Senior Software Architect and Ext Services Team Lead, wrote the ColdFusion Router. That's fitting, as Aaron's a long time ColdFusion guy, having contributed to the ColdBox project back in it's early days. I'm excited about what Ext.Direct can mean for Ext - ColdFusion based applications, and I'll be deep diving this integration soon. I'll be curious to see how I can integrate CFQueryReader into the mix. I have an update to that which I hope to get out in the next few days.

Ext Conference: Day 1

Tue, 14 Apr 2009 23:55:00 -0400

Day 1 of the Ext JS Conference has been busy. Last night I had dinner and drinks with Jeff, a really nice guy who heads up development for a group writing web based interfaces to hardware appliances. Turns out Jeff is also the guy who introduced JavaScript to Douglas Crockford, who was today's keynote speaker. Douglas made sure to recognize Jeff at the beginning of his keynote, which I thought was a nice nod to the guy who helped give him direction in his career. Douglas ran us through a brief history of hypertext, the evolution of the web, JavaScipt, and the browser wars, before touching on the future of the web, some of the things in the new JavaScript specs being worked on through ECMA, and the fact that none of it would matter for years until the browser manufacturers would implement it. He did give props to Flash, AIR and SilverLight for trying to further the web experience where it has lagged so much over the years. He also spoke about the pitfalls of security in Web 2.0 applications, and the primary culprits of those issues (the browser manufacturers). Before I go a whole lot further, let me tell you that the conference center, and their service to us, is fantastic. Held at the Ritz-Carlton Orlando, the location is beautiful with it's palm lined drives, a well groomed golf course winding around several 'water traps', and a huge pool with several fountains. The food has been exceptional, with an incredible meal at lunch, complete with salad, brazed chicken, and desert with complete table service (this as part of the conference). No buffet sandwhiches here, though a breakfast buffet would have been nice before that 830 session this morning. My room is about half the size of the one I had at the Hotel Rouge last year for WebManiacs, but it is very comfortable and service keeps it nice. The shower did flood the entire bathroom this morning and the in-room coffee is horribly weak (and small), but everything can't be perfect. I've also carried on my conference tradition of bringing a sinus infection with me, which is keeping me from the after-session activities this evening, but the concierge was able to get me covered with some NyQuil for the evening to try to knock this stuff out of me. Aaron Conran, fellow ColdFusion developer and one of the original contributors to ColdBox, delivered the session covering what has changed and what's new within the 3.0 release, which is officially released tomorrow by Jack Slocum during his keynote. A great deal of work has been spent to make the upgrade fairly painless, with attention payed to backwards compatability, improvements to overall memory management (always important), and an eye towards keeping the code lean and mean, doing what is necessary to keep code size to a minimum and eliminate any unnecessary bloat. Menus and Toolbars have been converted into true Container objects, and the only significant markup changes appear to be to the Button objects. There are several new visual components, maintaining the professional feel and consistency that has made Ext JS so compelling. Two that attracted a great deal of attention were the ListView and the Buffered Grid View. Sometimes you want the basic view afforded by a Grid, without having the need for (or the overhead of) things like drag and drop column ordering, sorting, and the like. The ListView gives you a basic grid style layout without all of that overhead, and a very trim DOM footprint as well, providing your view without unnecessary code bloat and browser memory overhead. The Buffered Grid View is a full Grid implementation that allows the browser to only render DOM for records in actual view, plus a few extra to make smooth transitions on scrolling, that automatically adds and removes DOM items when scrolling through your recordsets. The memory management improvements with this, and other changes, are very nice to see. Like the new .mon(), or 'managed on', methods that allow you to bind events in a temporary fashion, getting a proper cleanup from browser memory when that component gets destroyed. This was actually a method of Ext prior to it's 1.0 release, and has been heavily requested for this return. Being the server-side guy that I've been for the last decade, the important new components came to the Ext.data package, with the addition of the Ext.data.Direct and Ext.data.DataWriter classes. Direct provides the ability to marshall your remote service call definitions into one container, calling your Ajax data requests from a centralized location with the ability to make multiple commands through a single Ajax request as well as call listeners on specific actions performed by Direct. Chris Scott did a presentation on Direct this afternoon, explaining how the developer has to create a server side Router to which Direct can attach it's requests, and showing us all a nice and very simple example (even if it was written in Ruby). The Ext Team provides a Reference for development of Routers in a number of server-side languages, including ColdFusion, PHP, Ruby, and .NET. The DataWriter class, covered in more depth in a future session, does for POST requests what the DataReader does for your GET requests, allowing a developer to define your routing of requests to send data back to the server. The combination of these classes with the existing classes of the Ext.data package really improves upon the power of using Ext with any server-side technology. I was able to see the presentation on the Direct class because of a snafu with a scheduling change of the presentation of the Ext.air package. Originally these two sessions were the one conflict in my schedule, but they moved the Ext.air presentation session up a time slot (a change I didn't know of until after the fact) which allowed me the opportunity to sit in on Chris's session. Luckily the presentations are being recorded and are supposed to be available online after the conference. I'm glad they're doing this, since I had to leave during my final session of the day, on Ext.Core, due to the sinus issues that progressively worsened through the day. The Ext.air session is one I am very looking forward to watching. The members of the Ext Team are a great group of guys. Abe, again, congratulated me on the book, and invited me to sit in on the Industry Experts panel tomorrow. I've had several people say they wished they had brought their copies of the book so Shea and I could have signed them for them. One attendee asked why PackT didn't have a booth setup somewhere, which is when I first noticed that their don't appear to be any outside sponsors for the conference. Ext appears to have financed the conference solely through the registration of the 200+ attending, which is pretty impressive considering the facility and it's services. On another note, ColdFusion has been publicly mentioned in several presentations, and with so many different server-side programmers represented here it is refreshing to hear so many comment that they should give ColdFusion a hard look. And with that, I'm going to pack it in for the evening and pray that the NyQuil does it's job to kick the junk out of my head. Tomorrow looks to be an exciting day, with Jack's keynote releasing Ext 3.0, sessions on User Experience Design, Theming, and Performance Optimization. I'll be posting updates to Twitter and my Facebook profile throughout the day. If you're here, make sure to come up and say hi.

Orlando Bound...

Mon, 13 Apr 2009 13:47:00 -0400

So, in about an hour I head to the airport to attend the first ever Ext Conference in Orlando, FL. I'll be posting updates throughout the conference, both here and on Twitter. Jack Slocum and the Team will be releasing the long awaited 3.0, which looks to be a very compelling upgrade to the library. I'll be touching down around 6pm, and should get to the hotel sometime around 7 (I hope), so if you're already there look me up.

Ext Core 3.0 Beta Released

Sat, 04 Apr 2009 09:27:00 -0400

At an impressively lightweight 25kb, the new Ext Core 3.0 beta was released early this morning. With a detailed 75 page (if printed) manual, a number of ready made (and useful) examples, and an MIT license, Ext Core will be a major contendor in the Basic DOM and CSS manipulation space. Definitely worth a hard look.

CF 8 and Ext: Presenting to Phoenix CFUG

Mon, 23 Mar 2009 13:26:00 -0400

March 25th, at 6:30pm MST (9:30 EDT, 8:30 CDT [Phoenix doesn't do Daylight Savings]), I will be presenting to the Phoenix ColdFusion User Group my presentation on ColdFusion 8 Ajax and Extension with Ext JS. For those not in the Phoenix area, you can attend over Adobe Connect.

Development Ties

Thu, 19 Feb 2009 08:53:00 -0400

On the last day of CFUnited 2005, a group of us were out on the patio having a final drink together. I got into a conversation with Clark Valberg about linguistics. I was a translator in latter half of my time in the military, and Clark was asking if I thought my experience with learning another language had helped me in learning to be a better developer? I absolutely agreed. I have an aptitude for languages, and always have. It's something I've picked up, and I can generally get to a point where I can effectively communicate (at least on the simplest of terms) within a very short time. Programming isn't much different, if you think about it. When I first got into computing again, after leaving the Army, I was teaching myself ten different programming languages at the same time. I had a lot of catching up to do, being out of the game for so long, so I picked up some books, found online resources, and took to the task of getting up to speed. Maybe that's why there are so many talented developers outside the US. In the US, we aren't required to learn another language out of necessity, whereas in most other countries of the world (not all, but most) it is very commonplace for people to speak two or more languages. You can kind of apply this in the reverse, to some degree, as well. Those who only learn one development platform may be limiting themselves. Knowing one programming language inside and out can be a good thing, but learning others can also open a developer to new ways of approaching a challenge. I've known many developers who knew a server-side language (ColdFusion, ASP, PHP, whatever), but never bothered to learn JavaScript, or how to write well formed XHTML. To me, that's limiting. Even crippling. What are your thoughts?