examples/key-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             listeners: {
  48                 scope: this,
  49                 select: this.onSelect
  50             }
  51         });
  52         this.loadFeed(this.url);
  53         return this.grid;
  54     },
  55
  56     /**
  57      * Fires when a grid row is selected
  58      * @private
  59      * @param {FeedViewer.FeedGrid} grid
  60      * @param {Ext.data.Model} rec
  61      */
  62     onSelect: function(grid, rec) {
  63         this.display.setActive(rec);
  64     },
  65
  66     /**
  67      * Creates top controller toolbar.
  68      * @private
  69      * @return {Ext.toolbar.Toolbar} toolbar
  70      */
  71     createTopToolbar: function(){
  72         this.toolbar = Ext.create('widget.toolbar', {
  73             cls: 'x-docked-noborder-top',
  74             items: [{
  75                 iconCls: 'open-all',
  76                 text: 'Open All',
  77                 scope: this,
  78                 handler: this.onOpenAllClick
  79             }, '-', {
  80                 xtype: 'cycle',
  81                 text: 'Reading Pane',
  82                 prependText: 'Preview: ',
  83                 showText: true,
  84                 scope: this,
  85                 changeHandler: this.readingPaneChange,
  86                 menu: {
  87                     id: 'reading-menu',
  88                     items: [{
  89                         text: 'Bottom',
  90                         checked: true,
  91                         iconCls:'preview-bottom'
  92                     }, {
  93                         text: 'Right',
  94                         iconCls:'preview-right'
  95                     }, {
  96                         text: 'Hide',
  97                         iconCls:'preview-hide'
  98                     }]
  99                 }
 100             }, {
 101                 iconCls: 'summary',
 102                 text: 'Summary',
 103                 enableToggle: true,
 104                 pressed: true,
 105                 scope: this,
 106                 toggleHandler: this.onSummaryToggle
 107             }]
 108         });
 109         return this.toolbar;
 110     },
 111
 112     /**
 113      * Reacts to the open all being clicked
 114      * @private
 115      */
 116     onOpenAllClick: function(){
 117         this.fireEvent('openall', this);
 118     },
 119
 120     /**
 121      * Gets a list of titles/urls for each feed.
 122      * @return {Array} The feed details
 123      */
 124     getFeedData: function(){
 125         return this.grid.store.getRange();
 126     },
 127
 128     /**
 129      * @private
 130      * @param {Ext.button.Button} button The button
 131      * @param {Boolean} pressed Whether the button is pressed
 132      */
 133     onSummaryToggle: function(btn, pressed) {
 134         this.grid.getComponent('view').getPlugin('preview').toggleExpanded(pressed);
 135     },
 136
 137     /**
 138      * Handle the checked item being changed
 139      * @private
 140      * @param {Ext.menu.CheckItem} item The checked item
 141      */
 142     readingPaneChange: function(cycle, activeItem){
 143         switch (activeItem.text) {
 144             case 'Bottom':
 145                 this.east.hide();
 146                 this.south.show();
 147                 this.south.add(this.display);
 148                 break;
 149             case 'Right':
 150                 this.south.hide();
 151                 this.east.show();
 152                 this.east.add(this.display);
 153                 break;
 154             default:
 155                 this.south.hide();
 156                 this.east.hide();
 157                 break;
 158         }
 159     },
 160
 161     /**
 162      * Create the south region container
 163      * @private
 164      * @return {Ext.panel.Panel} south
 165      */
 166     createSouth: function(){
 167         this.south =  Ext.create('Ext.container.Container', {
 168             layout: 'fit',
 169             region: 'south',
 170             split: true,
 171             flex: 2,
 172             items: this.display
 173         });
 174         return this.south;
 175     },
 176
 177     /**
 178      * Create the east region container
 179      * @private
 180      * @return {Ext.panel.Panel} east
 181      */
 182     createEast: function(){
 183         this.east =  Ext.create('Ext.panel.Panel', {
 184             layout: 'fit',
 185             region: 'east',
 186             flex: 1,
 187             split: true,
 188             hidden: true,
 189             border: false
 190         });
 191         return this.east;
 192     }
 193 });