Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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 + ' &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);
}
});
<!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