components.js

## components.js
Ext.namespace('Alcedine.component');

Alcedine.component.RSSReader = Ext.extend(Ext.Panel, {
	title: 'RSS Feeds',
	frame: true,
	cls: 'rss-reader-panel',
	autoHeight:true,
	feeds: [{
		title: 'No Feed Loaded',
		url: '',
		feed: ''
	}],
	initComponent: function(){
		var component = this;

		//Grid Column and Record Templates:
				//Column Model
				var feedCM = new Ext.grid.ColumnModel({
					columns: [
						{header: 'Date',
						dataIndex: 'date',
						width: 80,
						renderer: renderDate},
						{header: 'Title',
						dataIndex: 'title',
						id: 'title',
						renderer: renderTitle}
					]
				});
				//Renderers
				function renderTitle(value, p, r){
					return String.format("<a href='{1}'>{0}</a>", value, r.data['url']);
				}
				function renderDate(value, p, r){
					var dt = new Date(value);
					return dt.format("M d, Y");
				}
				//Record Template
				feedEntry = Ext.data.Record.create([
					{name: 'date', type: 'string'},
					{name: 'title', type: 'string'},
					{name: 'url', type: 'string'}
				]);


		//Get feed from Google Feed API and add to Panel
		function getFeed(feedInfo){
			google.load("feeds", "1");
			function initialize() {

				//Load the Feeds
				var theFeed = new google.feeds.Feed(feedInfo.feed);
				theFeed.load(function(result) {

					//Build the Grid
					var grid = new Ext.grid.GridPanel({
						autoHeight: true,
						hideHeaders: true,
						store: new Ext.data.Store(),
						colModel: feedCM,
						autoExpandColumn: 'title',
						style: 'border: solid 1px #99BBE8;',
						tbar: new Ext.Toolbar({
							style: 'border: 0;',
							items: [{
								text: feedInfo.title + ' &raquo;',
								handler: function(){ location.href = feedInfo.url; }
							},'->',{
								xtype: 'tbbutton',
								text: '<a href="'+ feedInfo.feed +'"><img src="i/rss.png" /></a>',
								template: new Ext.Template('<div><span style="color:#0E58A0;">{0}</span></div>'),
								onRender: function(ct, position){
									var btn, targs = [this.text];
									if(position){
										btn = this.template.insertBefore(position, targs, true);
									}else{
										btn = this.template.append(ct, targs, true);
									}
									var btnEl = btn.child("span:first");
									btnEl.on('focus', this.onFocus, this);
									btnEl.on('blur', this.onBlur, this);

									this.initButtonEl(btn, btnEl);
									Ext.ButtonToggleMgr.register(this);
								}
							},'']
						}),
						disableSelection: true,
						trackMouseOver: false,
						loadMask: true
					});

					//Check for feed errors and add records to the Grid
					if (!result.error) {
						for (var i = 0; i < result.feed.entries.length; i++) {
							var entry = result.feed.entries[i];

							var record = new feedEntry({
							    date: entry.publishedDate,
							    title: entry.title,
							    url: entry.link
							});
							grid.getStore().add(record);
						}
						grid.getStore().commitChanges();
					}
					//Add the Grid to the Panel and refresh the layout
					component.add(grid);
					component.doLayout();
				});
			}
			google.setOnLoadCallback(initialize);
		}

		//Get each Feed included in the Panel's properties and run it through the Google Feed API, returning its data and adding it back to the Panel
		component.on('render', function() {
			for (var i = 0; i < this.feeds.length; i++) {
				var currentFeed = this.feeds[i];
				getFeed(currentFeed);
			}
		});
		Alcedine.component.RSSReader.superclass.initComponent.call(this,arguments);
	}
});

## index.html
<!DOCTYPE html>
<html>
<head>
  <title>ExtJS RSS Reader</title>
  <link rel="stylesheet" type="text/css" href="/ext-2.3.0/resources/css/ext-all.css">
  <script type="text/javascript" src="/ext-2.3.0/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="/ext-2.3.0/ext-all.js"></script>
  <script type="text/javascript" src="components.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body style="padding: 10px;">


<div id="rss-reader"></div>


<!-- JavaScript Instantiation -->
<script type="text/javascript">

var rssReader = new Alcedine.component.RSSReader({
	applyTo: 'rss-reader',
	width: 750,
	feeds: [{
		title: 'Alcedine',
		url: 'http://alcedine.com',
		feed: 'http://alcedine.com/feed/'
	},{
		title: 'Two Thirty AM',
		url: 'http://230.am/',
		feed: 'http://230.am/blog?format=rss'
	}]
});

</script>
</body>
</html>