ExtJS 2.3 RSS Reader with Google Feed API
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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment