Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
ExtJS 2.3 RSS Reader with Google Feed API
Alcedine.component.RSSReader = Ext.extend(Ext.Panel, {
title: 'RSS Feeds',
frame: true,
cls: 'rss-reader-panel',
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}
function renderTitle(value, p, r){
return String.format("<a href='{1}'>{0}</a>", value,['url']);
function renderDate(value, p, r){
var dt = new Date(value);
return dt.format("M d, Y");
//Record Template
feedEntry =[
{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,
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];
btn = this.template.insertBefore(position, targs, true);
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);
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,
//Add the Grid to the Panel and refresh the layout
//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];
<!DOCTYPE html>
<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=""></script>
<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: '',
feed: ''
title: 'Two Thirty AM',
url: '',
feed: ''
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment