examples/key-feed-viewer/viewer/FeedPost.js

   1 /**
   2  * @class FeedViewer.FeedPost
   3  * @extends Ext.panel.Panel
   4  *
   5  * Shows the detail of a feed post
   6  *
   7  * @constructor
   8  * Create a new Feed Post
   9  * @param {Object} config The config object
  10  */
  11 Ext.define('FeedViewer.FeedPost', {
  12
  13     extend: 'Ext.panel.Panel',
  14     alias: 'widget.feedpost',
  15     cls: 'preview',
  16     autoScroll: true,
  17     border: true,
  18
  19     initComponent: function(){
  20         Ext.apply(this, {
  21             dockedItems: [this.createToolbar()],
  22             tpl: Ext.create('Ext.XTemplate',
  23                 '<div class="post-data">',
  24                     '<span class="post-date">{pubDate:this.formatDate}</span>',
  25                     '<h3 class="post-title">{title}</h3>',
  26                     '<h4 class="post-author">by {author:this.defaultValue}</h4>',
  27                 '</div>',
  28                 '<div class="post-body">{content:this.getBody}</div>',
  29                 {
  30                     getBody: function(value, all){
  31                         return Ext.util.Format.stripScripts(value);
  32                     },
  33
  34                     defaultValue: function(v){
  35                         return v ? v : 'Unknown';
  36                     },
  37
  38                     formatDate: function(value){
  39                         if (!value) {
  40                             return '';
  41                         }
  42                         return Ext.Date.format(value, 'M j, Y, g:i a');
  43                     }
  44                 }
  45              )
  46         });
  47         this.callParent(arguments);
  48     },
  49
  50     /**
  51      * Set the active post
  52      * @param {Ext.data.Model} rec The record
  53      */
  54     setActive: function(rec) {
  55         this.active = rec;
  56         this.update(rec.data);
  57     },
  58
  59     /**
  60      * Create the top toolbar
  61      * @private
  62      * @return {Ext.toolbar.Toolbar} toolbar
  63      */
  64     createToolbar: function(){
  65         var items = [],
  66             config = {};
  67         if (!this.inTab) {
  68             items.push({
  69                 scope: this,
  70                 handler: this.openTab,
  71                 text: 'View in new tab',
  72                 iconCls: 'tab-new'
  73             }, '-');
  74         }
  75         else {
  76             config.cls = 'x-docked-noborder-top';
  77         }
  78         items.push({
  79             scope: this,
  80             handler: this.goToPost,
  81             text: 'Go to post',
  82             iconCls: 'post-go'
  83         });
  84         config.items = items;
  85         return Ext.create('widget.toolbar', config);
  86     },
  87
  88     /**
  89      * Navigate to the active post in a new window
  90      * @private
  91      */
  92     goToPost: function(){
  93         window.open(this.active.get('link'));
  94     },
  95
  96     /**
  97      * Open the post in a new tab
  98      * @private
  99      */
 100     openTab: function(){
 101         this.fireEvent('opentab', this, this.active);
 102     }
 103
 104 });