Alcedine/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>
	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 + ' »',
	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);
	}
	});
	<!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>