Created
September 21, 2012 23:28
-
-
Save Alcedine/3764494 to your computer and use it in GitHub Desktop.
ExtJS 2.3 RSS Reader with Google Feed API
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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