My First ExtJS DataGrid Pt 1

I can write my own code. I can take a process, define a proper algorithm for addressing an issue, and tap it out. In fact I enjoy the art of writing code, it's kinda like working on puzzles day in and day out, and I like a good puzzle. On the other hand I think it's also smart not to re-invent the wheel. Many minds have dealt with the same problems that I encounter every day, and someone has probably found a solution by now. Why fight that?

So I keep snippets of valuable code that I find, read a lot of lists and blogs, and learn frameworks that can help me speed my tasks. Like JQuery, an excellent cross-browser JavaScript library for simplifying DOM access and manipulation. I've been having some fun learning JQuery, and enjoying the speed and flexibility with which it allows me to create some very nice, interactive user interfaces. But things have recently gotten even better. Jack Slocum, creator of the truly slick Yahoo User Interface Extensions library, has ported his library over so that it may now also be used by JQuery or Prototype/Script.ac.u.lous. This means that one can enjoy the power and the beauty of these great UI component libraries from within the context of the JQuery framework.

The first thing that I set out to do, once downloading the necessary script files, was to figure out how to create grids. DataGrids are one of the most challenging things to write and master, whether it's cfform based, Flex, or anything. The Ext library has some really slick and extensible grid components within the framework that can really take your 'table' data to new levels. I immediately set out to adjust the included sample for a paging grid, meaning a grid that contains n of x recordsets, with buttons to page to the next y records. With these grids you have the capability of using AJAX to handle your next/previous navigation without requiring a page reload, sort on any column, resize column widths, and even apply custom cell renderers.

Over the next several posts I'm going to show you step by step how I discovered how to use this component of this great UI library. Some of this I will fumble through, as I'm learning as I go as well, but hopefully it will give you an idea of what you can do. I welcome any comments, criticisms, support, and suggestions along the way. A few of the things to be covered are:

• Writing a Paging Query Page
• Defining the DataStore
• Creating a ColumnModel to map to your query results
• Defining and Implementing Custom Cell Renderers
• Rendering and Styling your grid
• Write A Custom Event Handler
• And Probably More...