examples/feed-viewer/viewer/FeedViewer.js

   1 /**
   2  * @class FeedViewer.FeedViewer
   3  * @extends Ext.container.Viewport
   4  *
   5  * The main FeedViewer application
   6  *
   7  * @constructor
   8  * Create a new Feed Viewer app
   9  * @param {Object} config The config object
  10  */
  11
  12 Ext.define('FeedViewer.App', {
  13     extend: 'Ext.container.Viewport',
  14
  15     initComponent: function(){
  16
  17         Ext.define('Feed', {
  18             extend: 'Ext.data.Model',
  19             fields: ['title', 'url']
  20         });
  21
  22         Ext.define('FeedItem', {
  23             extend: 'Ext.data.Model',
  24             fields: ['title', 'author', {
  25                 name: 'pubDate',
  26                 type: 'date'
  27             }, 'link', 'description', 'content']
  28         });
  29
  30         Ext.apply(this, {
  31             layout: 'border',
  32             padding: 5,
  33             items: [this.createFeedPanel(), this.createFeedInfo()]
  34         });
  35         this.callParent(arguments);
  36     },
  37
  38     /**
  39      * Create the list of fields to be shown on the left
  40      * @private
  41      * @return {FeedViewer.FeedPanel} feedPanel
  42      */
  43     createFeedPanel: function(){
  44         this.feedPanel = Ext.create('widget.feedpanel', {
  45             region: 'west',
  46             collapsible: true,
  47             width: 225,
  48             floatable: false,
  49             split: true,
  50             minWidth: 175,
  51             feeds: [{
  52                 title: 'Sencha Blog',
  53                 url: 'http://feeds.feedburner.com/extblog'
  54             }, {
  55                 title: 'Sencha Forums',
  56                 url: 'http://sencha.com/forum/external.php?type=RSS2'
  57             }, {
  58                 title: 'Ajaxian',
  59                 url: 'http://feeds.feedburner.com/ajaxian'
  60             }],
  61             listeners: {
  62                 scope: this,
  63                 feedselect: this.onFeedSelect
  64             }
  65         });
  66         return this.feedPanel;
  67     },
  68
  69     /**
  70      * Create the feed info container
  71      * @private
  72      * @return {FeedViewer.FeedInfo} feedInfo
  73      */
  74     createFeedInfo: function(){
  75         this.feedInfo = Ext.create('widget.feedinfo', {
  76             region: 'center',
  77             minWidth: 300
  78         });
  79         return this.feedInfo;
  80     },
  81
  82     /**
  83      * Reacts to a feed being selected
  84      * @private
  85      */
  86     onFeedSelect: function(feed, title, url){
  87         this.feedInfo.addFeed(title, url);
  88     }
  89 });