Tuesday, September 5th, 2006

YUI Ajax Feed Reader

Category: Examples, Sencha, Yahoo!

Jack Slocum has written a sample application using the new Grid Component from the Yahoo! UI library:

The JS documentation for the new Grid component contains alot of classes and alot of inherited methods. For someone who is not very advanced with object-oriented development, it may seem complex or difficult to trace the various inherited methods through the class hierachy. It may also seem like the Grid is difficult to use. While most of the classes in the YAHOO.ext.grid package are designed to be plug and play, extended and customized, it still very easy to simply plug the grid into a webapp with a minimal amount of code.

Jack goes on to show you the feed reader code step by step:


  1. // setup a data model
  2. var schema = {
  3.      tagName: 'item',
  4.      id: 'use-index',
  5.      fields: ['title', 'pubDate']
  6. };
  7. this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
  8. this.dataModel.addPreprocessor(1, parseDate); // add preprocessor to col 1 to parse dates
  9. this.dataModel.onLoad.subscribe(this.onLoad.createDelegate(this));
  10. this.dataModel.onLoadException.subscribe(this.showError.createDelegate(this));
  11. this.dataModel.setDefaultSort(colModel, 1, 'ASC');
  13. // create the grid
  14. this.selModel = new YAHOO.ext.grid.SingleSelectionModel();
  15. this.selModel.onRowSelect.subscribe(this.showPost, this, true);
  16. this.grid = new YAHOO.ext.grid.Grid('feed-grid', this.dataModel, colModel, this.selModel);
  17. this.grid.render();

For an example, it looks really clean and nice too.

YUI Feed Reader

Posted by Dion Almaer at 8:55 am

4 rating from 38 votes


Comments feed TrackBack URI

To avoid any potential confusion, I’d like to point out that the Grid component he is using is not an official part of the YUI – it’s an extension component that he himself has created.

Comment by Simon Willison — September 5, 2006

Jack Slocum rocks. His blog is awesome, just keep an eye on it!

Comment by Dude — September 5, 2006

Interesting idea. I am not able to scroll any further than the light blue line below the header with my mouse wheel though, which is quite annoying. I’m on Firefox 1.0.7 and xp pro, maybe 1.5 behaves better.

It also looks very tempting to use with javascript disabled, but does nothing (rightly so), but it shouldn’t be displayed at all then. Also the site navigation is non-existent (at least I can’t find it) without javascript.

Comment by Mike — September 5, 2006

The grid component from Yahoo! UI library really makes it very simple to develop applications that otherwise require technical expertise in the specific domain. The component that Jack extended from YUI is a very useful example of that.

Comment by Balendu Sharma Dadhich — August 22, 2007

Leave a comment

You must be logged in to post a comment.