examples/feed-viewer/viewer/FeedWindow.js

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