examples/feed-viewer/viewer/FeedDetail.js

   1 /**
   2  * @class FeedViewer.FeedDetail
   3  * @extends Ext.panel.Panel
   4  *
   5  * Shows the details of a particular feed
   6  *
   7  * @constructor
   8  * Create a new Feed Detail
   9  * @param {Object} config The config object
  10  */
  11 Ext.define('FeedViewer.FeedDetail', {
  12
  13     extend: 'Ext.panel.Panel',
  14     alias: 'widget.feeddetail',
  15
  16     border: false,
  17
  18     initComponent: function(){
  19         this.display = Ext.create('widget.feedpost', {});
  20         Ext.apply(this, {
  21             layout: 'border',
  22             items: [this.createGrid(), this.createSouth(), this.createEast()]
  23         });
  24         this.relayEvents(this.display, ['opentab']);
  25         this.relayEvents(this.grid, ['rowdblclick']);
  26         this.callParent(arguments);
  27     },
  28
  29     /**
  30      * Loads a feed.
  31      * @param {String} url
  32      */
  33     loadFeed: function(url){
  34         this.grid.loadFeed(url);
  35     },
  36
  37     /**
  38      * Creates the feed grid
  39      * @private
  40      * @return {FeedViewer.FeedGrid} feedGrid
  41      */
  42     createGrid: function(){
  43         this.grid = Ext.create('widget.feedgrid', {
  44             region: 'center',
  45             dockedItems: [this.createTopToolbar()],
  46             flex: 2,
  47             minHeight: 200,
  48             minWidth: 150,
  49             listeners: {
  50                 scope: this,
  51                 select: this.onSelect
  52             }
  53         });
  54         this.loadFeed(this.url);
  55         return this.grid;
  56     },
  57
  58     /**
  59      * Fires when a grid row is selected
  60      * @private
  61      * @param {FeedViewer.FeedGrid} grid
  62      * @param {Ext.data.Model} rec
  63      */
  64     onSelect: function(grid, rec) {
  65         this.display.setActive(rec);
  66     },
  67
  68     /**
  69      * Creates top controller toolbar.
  70      * @private
  71      * @return {Ext.toolbar.Toolbar} toolbar
  72      */
  73     createTopToolbar: function(){
  74         this.toolbar = Ext.create('widget.toolbar', {
  75             cls: 'x-docked-noborder-top',
  76             items: [{
  77                 iconCls: 'open-all',
  78                 text: 'Open All',
  79                 scope: this,
  80                 handler: this.onOpenAllClick
  81             }, '-', {
  82                 xtype: 'cycle',
  83                 text: 'Reading Pane',
  84                 prependText: 'Preview: ',
  85                 showText: true,
  86                 scope: this,
  87                 changeHandler: this.readingPaneChange,
  88                 menu: {
  89                     id: 'reading-menu',
  90                     items: [{
  91                         text: 'Bottom',
  92                         checked: true,
  93                         iconCls:'preview-bottom'
  94                     }, {
  95                         text: 'Right',
  96                         iconCls:'preview-right'
  97                     }, {
  98                         text: 'Hide',
  99                         iconCls:'preview-hide'
 100                     }]
 101                 }
 102             }, {
 103                 iconCls: 'summary',
 104                 text: 'Summary',
 105                 enableToggle: true,
 106                 pressed: true,
 107                 scope: this,
 108                 toggleHandler: this.onSummaryToggle
 109             }]
 110         });
 111         return this.toolbar;
 112     },
 113
 114     /**
 115      * Reacts to the open all being clicked
 116      * @private
 117      */
 118     onOpenAllClick: function(){
 119         this.fireEvent('openall', this);
 120     },
 121
 122     /**
 123      * Gets a list of titles/urls for each feed.
 124      * @return {Array} The feed details
 125      */
 126     getFeedData: function(){
 127         return this.grid.store.getRange();
 128     },
 129
 130     /**
 131      * @private
 132      * @param {Ext.button.Button} button The button
 133      * @param {Boolean} pressed Whether the button is pressed
 134      */
 135     onSummaryToggle: function(btn, pressed) {
 136         this.grid.getComponent('view').getPlugin('preview').toggleExpanded(pressed);
 137     },
 138
 139     /**
 140      * Handle the checked item being changed
 141      * @private
 142      * @param {Ext.menu.CheckItem} item The checked item
 143      */
 144     readingPaneChange: function(cycle, activeItem){
 145         switch (activeItem.text) {
 146             case 'Bottom':
 147                 this.east.hide();
 148                 this.south.show();
 149                 this.south.add(this.display);
 150                 break;
 151             case 'Right':
 152                 this.south.hide();
 153                 this.east.show();
 154                 this.east.add(this.display);
 155                 break;
 156             default:
 157                 this.south.hide();
 158                 this.east.hide();
 159                 break;
 160         }
 161     },
 162
 163     /**
 164      * Create the south region container
 165      * @private
 166      * @return {Ext.panel.Panel} south
 167      */
 168     createSouth: function(){
 169         this.south =  Ext.create('Ext.container.Container', {
 170             layout: 'fit',
 171             region: 'south',
 172             split: true,
 173             flex: 2,
 174             minHeight: 150,
 175             items: this.display
 176         });
 177         return this.south;
 178     },
 179
 180     /**
 181      * Create the east region container
 182      * @private
 183      * @return {Ext.panel.Panel} east
 184      */
 185     createEast: function(){
 186         this.east =  Ext.create('Ext.panel.Panel', {
 187             layout: 'fit',
 188             region: 'east',
 189             flex: 1,
 190             split: true,
 191             hidden: true,
 192             minWidth: 150,
 193             border: false
 194         });
 195         return this.east;
 196     }
 197 });