Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / feed-viewer / viewer / FeedPost.js

diff --git a/examples/feed-viewer/viewer/FeedPost.js b/examples/feed-viewer/viewer/FeedPost.js
new file mode 100644 (file)
index 0000000..ce80bc5
--- /dev/null
+++ b/examples/feed-viewer/viewer/FeedPost.js
@@ -0,0 +1,104 @@
+/**
+ * @class FeedViewer.FeedPost
+ * @extends Ext.panel.Panel
+ *
+ * Shows the detail of a feed post
+ *
+ * @constructor
+ * Create a new Feed Post
+ * @param {Object} config The config object
+ */
+Ext.define('FeedViewer.FeedPost', {
+
+    extend: 'Ext.panel.Panel',
+    alias: 'widget.feedpost',
+    cls: 'preview',
+    autoScroll: true,
+    border: true,
+    
+    initComponent: function(){
+        Ext.apply(this, {
+            dockedItems: [this.createToolbar()],
+            tpl: Ext.create('Ext.XTemplate',
+                '<div class="post-data">',
+                    '<span class="post-date">{pubDate:this.formatDate}</span>',
+                    '<h3 class="post-title">{title}</h3>',
+                    '<h4 class="post-author">by {author:this.defaultValue}</h4>',
+                '</div>',
+                '<div class="post-body">{content:this.getBody}</div>',
+                {
+                    getBody: function(value, all){
+                        return Ext.util.Format.stripScripts(value);
+                    },
+
+                    defaultValue: function(v){
+                        return v ? v : 'Unknown';
+                    },
+
+                    formatDate: function(value){
+                        if (!value) {
+                            return '';
+                        }
+                        return Ext.Date.format(value, 'M j, Y, g:i a');
+                    }
+                }
+             )
+        });
+        this.callParent(arguments);
+    },
+
+    /**
+     * Set the active post
+     * @param {Ext.data.Model} rec The record
+     */
+    setActive: function(rec) {
+        this.active = rec;
+        this.update(rec.data);
+    },
+
+    /**
+     * Create the top toolbar
+     * @private
+     * @return {Ext.toolbar.Toolbar} toolbar
+     */
+    createToolbar: function(){
+        var items = [],
+            config = {};
+        if (!this.inTab) {
+            items.push({
+                scope: this,
+                handler: this.openTab,
+                text: 'View in new tab',
+                iconCls: 'tab-new'
+            }, '-');
+        }
+        else {
+            config.cls = 'x-docked-noborder-top';
+        }
+        items.push({
+            scope: this,
+            handler: this.goToPost,
+            text: 'Go to post',
+            iconCls: 'post-go'
+        });
+        config.items = items;
+        return Ext.create('widget.toolbar', config);
+    },
+
+    /**
+     * Navigate to the active post in a new window
+     * @private
+     */
+    goToPost: function(){
+        window.open(this.active.get('link'));
+    },
+
+    /**
+     * Open the post in a new tab
+     * @private
+     */
+    openTab: function(){
+        this.fireEvent('opentab', this, this.active);
+    }
+
+});