Test Driving Ext JS

This week I’ve definitely been on a JavaScript kick. I’ve spent the last 2 days working in Jack Slocum’s Ext JS library, and the components he has put together are simply amazing. In the time I had to walk through his examples I was able to perform some basic testing on element manipulation, widgets, and grids.

Initial Reactions

This is the library that I want to have in my toolkit. Currently in beta, it will support jQuery (1.1+), Yahoo UI! (.12+), and Prototype (1.5+) / Scriptaculous (1.7+). The components are simple incredible, the documentation is deep (though not incredibly deep), and Jack has set up extensive support and licensing options.

My Testing

• Managing Elements
• Widget Fun
• Static and Dynamic Grids
• Grid Paging
• More Grid Paging

Grids (xml Data Load)

Of the items I did test (I have a lot more to go through) I was most excited about the grid components. For example, this customizable bit of code (along with the necessary javascript files) will render a grid from an xml file:

1. var ds = new Ext.data.Store({
2. proxy: new Ext.data.HttpProxy({url: 'sheldon.xml'}),
3. reader: new Ext.data.XmlReader({
4. record: 'Item',
5. id: 'ASIN',
6. totalRecords: '@total'
7. }, [
8. {name: 'Author', mapping: 'ItemAttributes > Author'},
9. 'Title', 'Manufacturer', 'ProductGroup'
10. ])
11. });
12. ds.load();
13. var cm = new Ext.grid.ColumnModel([
14. {header: "Author", width: 120, dataIndex: 'Author'},
15. {header: "Title", width: 180, dataIndex: 'Title'},
16. {header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
17. {header: "Product Group", width: 100, dataIndex: 'ProductGroup'}
18. ]);
19. cm.defaultSortable = true;
20. var grid = new Ext.grid.Grid('example-grid', {
21. ds: ds,
22. cm: cm
23. });
24. grid.render();

Of course this isn’t just a plug and play script. You have to have intimate knowledge of the (in this case) xml file you are working with. In my case I was working with an xml file which can be seen here: sheldon.xml. This file is part of the tutorial available at the Ext JS site.

Grids Paging

The paging capabilities available in Ext are awesome. In the following example, I have pulled data from the TripleJeah Wordpress database (remote dataset), and displayed that data in a paged grid. The complete example for this can be seen on the demo4c.php page. The only thing missing is the php script used to connect to the database, which can be seen in part below.

1. Successful connection to database
2. <?php
3. $sql_count = "SELECT `ID`, `post_author`, `post_content`, `post_title`, `guid`, `post_date` FROM `wp_posts` WHERE ID` <> '2' ORDER BY `post_date` DESC";
4. $sql = sprintf($sql_count . " LIMIT ".'%s'.", ".'%s',
5. mysql_real_escape_string($_GET['start']),
6. mysql_real_escape_string($_GET['limit']));
7. $rs_count = mysql_query($sql_count);
8. $rows = mysql_num_rows($rs_count);
9. $rs = mysql_query($sql);
10. while($obj = mysql_fetch_object($rs))
11. $arr[] = $obj;
12. echo $_GET['callback'] . ‘({"total":"’ . $rows . ‘","results":’ . json_encode($arr) . ‘})’;
13. ?>

Much of what I was able to do with this particular component was a result of a tutorial created by Shea Frederick.

Awesome, Isn’t It

If you’ve made it to the end of this post you likely visited the testing pages I have set up. If that is the case, you are probably in awe of what this library can do. I have barely even scratched the surface and I’m excited to continue digging. Check out the links I have provided and visit extjs.com for more information.