examples/feed-viewer/viewer/FeedWindow.js

   1 /**
   2  * @class FeedViewer.FeedWindow
   3  * @extends Ext.window.Window
   4  *
   5  * Shows a dialog for creating and validating a new feed.
   6  *
   7  * @constructor
   8  * Create a new Feed Window
   9  * @param {Object} config The config object
  10  */
  11
  12 Ext.define('FeedViewer.FeedWindow', {
  13     extend: 'Ext.window.Window',
  14
  15     alias: 'widget.feedwindow',
  16
  17     plain: true,
  18
  19     defaultFeeds: [
  20         ['http://rss.cnn.com/rss/edition.rss', 'CNN Top Stories'],
  21         ['http://sports.espn.go.com/espn/rss/news', 'ESPN Top News'],
  22         ['http://news.google.com/news?ned=us&topic=t&output=rss', 'Sci/Tech - Google News'],
  23         ['http://rss.news.yahoo.com/rss/software', 'Yahoo Software News']
  24     ],
  25
  26     initComponent: function(){
  27         this.addEvents(
  28             /**
  29              * @event feedvalid
  30              * @param {FeedViewer.FeedWindow} this
  31              * @param {String} title
  32              * @param {String} url
  33              * @param {String} description
  34              */
  35             'feedvalid'
  36         );
  37
  38         this.form = Ext.create('widget.form', {
  39             bodyPadding: '12 10 10',
  40             border: false,
  41             unstyled: true,
  42             items: [{
  43                 anchor: '100%',
  44                 itemId: 'feed',
  45                 fieldLabel: 'Enter the URL of the feed to add',
  46                 labelAlign: 'top',
  47                 msgTarget: 'under',
  48                 xtype: 'combo',
  49                 store: this.defaultFeeds,
  50                 getInnerTpl: function(){
  51                     return '<div class="feed-picker-url">{field1}</div><div class="feed-picker-title">{field2}</div>';
  52                 }
  53             }]
  54         });
  55         Ext.apply(this, {
  56             width: 500,
  57             title: 'Add Feed',
  58             iconCls: 'feed',
  59             layout: 'fit',
  60             items: this.form,
  61             buttons: [{
  62                 xtype: 'button',
  63                 text: 'Add Feed',
  64                 scope: this,
  65                 handler: this.onAddClick
  66             }, {
  67                 xtype: 'button',
  68                 text: 'Cancel',
  69                 scope: this,
  70                 handler: this.destroy
  71             }]
  72         });
  73         this.callParent(arguments);
  74     },
  75
  76     /**
  77      * React to the add button being clicked.
  78      * @private
  79      */
  80     onAddClick: function(){
  81         var url = this.form.getComponent('feed').getValue();
  82         this.form.setLoading({
  83             msg: 'Validating feed...'
  84         });
  85         Ext.Ajax.request({
  86             url: 'feed-proxy.php',
  87             params: {
  88                 feed: url
  89             },
  90             success: this.validateFeed,
  91             failure: this.markInvalid,
  92             scope: this
  93         });
  94     },
  95
  96     /**
  97      * React to the feed validation passing
  98      * @private
  99      * @param {Object} response The response object
 100      */
 101     validateFeed: function(response){
 102         this.form.setLoading(false);
 103
 104         var dq = Ext.DomQuery,
 105             url = this.form.getComponent('feed').getValue(),
 106             xml,
 107             channel,
 108             title;
 109
 110         try {
 111             xml = response.responseXML;
 112             channel = xml.getElementsByTagName('channel')[0];
 113             if (channel) {
 114                 title = dq.selectValue('title', channel, url);
 115                 this.fireEvent('feedvalid', this, title, url);
 116                 this.destroy();
 117                 return;
 118             }
 119         } catch(e) {
 120         }
 121         this.markInvalid();
 122
 123     },
 124
 125     /**
 126      * React to the feed validation failing
 127      * @private
 128      */
 129     markInvalid: function(){
 130         this.form.setLoading(false);
 131         this.form.getComponent('feed').markInvalid('The URL specified is not a valid RSS2 feed.');
 132     }
 133 });