|
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); |
|
} |
|
}); |
