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