Upgrade to ExtJS 3.0.0 - Released 07/06/2009

[extjs.git] / examples / key-feed-viewer / FeedGrid.js

diff --git a/examples/key-feed-viewer/FeedGrid.js b/examples/key-feed-viewer/FeedGrid.js
new file mode 100644 (file)
index 0000000..58dcd52
--- /dev/null
+++ b/examples/key-feed-viewer/FeedGrid.js
@@ -0,0 +1,162 @@
+/*!
+ * Ext JS Library 3.0.0
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+FeedGrid = function(viewer, config) {\r
+    this.viewer = viewer;\r
+    Ext.apply(this, config);\r
+\r
+    this.store = new Ext.data.Store({\r
+        proxy: new Ext.data.HttpProxy({\r
+            url: 'feed-proxy.php'\r
+        }),\r
+\r
+        reader: new Ext.data.XmlReader(\r
+            {record: 'item'},\r
+            ['title', 'author', {name:'pubDate', type:'date'}, 'link', 'description', 'content']\r
+        )\r
+    });\r
+    this.store.setDefaultSort('pubDate', "DESC");\r
+\r
+    this.columns = [{\r
+        id: 'title',\r
+        header: "Title",\r
+        dataIndex: 'title',\r
+        sortable:true,\r
+        width: 420,\r
+        renderer: this.formatTitle\r
+      },{\r
+        header: "Author",\r
+        dataIndex: 'author',\r
+        width: 100,\r
+        hidden: true,\r
+        sortable:true\r
+      },{\r
+        id: 'last',\r
+        header: "Date",\r
+        dataIndex: 'pubDate',\r
+        width: 150,\r
+        renderer:  this.formatDate,\r
+        sortable:true\r
+    }];\r
+\r
+    FeedGrid.superclass.constructor.call(this, {\r
+        region: 'center',\r
+        id: 'topic-grid',\r
+        loadMask: {msg:'Loading Feed...'},\r
+\r
+        sm: new Ext.grid.RowSelectionModel({\r
+            singleSelect:true\r
+        }),\r
+\r
+        viewConfig: {\r
+            forceFit:true,\r
+            enableRowBody:true,\r
+            showPreview:true,\r
+            getRowClass : this.applyRowClass\r
+        }\r
+    });\r
+\r
+    this.on('rowcontextmenu', this.onContextClick, this);\r
+};\r
+\r
+Ext.extend(FeedGrid, Ext.grid.GridPanel, {\r
+\r
+    onContextClick : function(grid, index, e){\r
+        if(!this.menu){ // create context menu on first right click\r
+            this.menu = new Ext.menu.Menu({\r
+                id:'grid-ctx',\r
+                items: [{\r
+                    text: 'View in new tab',\r
+                    iconCls: 'new-tab',\r
+                    scope:this,\r
+                    handler: function(){\r
+                        this.viewer.openTab(this.ctxRecord);\r
+                    }\r
+                },{\r
+                    iconCls: 'new-win',\r
+                    text: 'Go to Post',\r
+                    scope:this,\r
+                    handler: function(){\r
+                        window.open(this.ctxRecord.data.link);\r
+                    }\r
+                },'-',{\r
+                    iconCls: 'refresh-icon',\r
+                    text:'Refresh',\r
+                    scope:this,\r
+                    handler: function(){\r
+                        this.ctxRow = null;\r
+                        this.store.reload();\r
+                    }\r
+                }]\r
+            });\r
+            this.menu.on('hide', this.onContextHide, this);\r
+        }\r
+        e.stopEvent();\r
+        if(this.ctxRow){\r
+            Ext.fly(this.ctxRow).removeClass('x-node-ctx');\r
+            this.ctxRow = null;\r
+        }\r
+        this.ctxRow = this.view.getRow(index);\r
+        this.ctxRecord = this.store.getAt(index);\r
+        Ext.fly(this.ctxRow).addClass('x-node-ctx');\r
+        this.menu.showAt(e.getXY());\r
+    },\r
+\r
+    onContextHide : function(){\r
+        if(this.ctxRow){\r
+            Ext.fly(this.ctxRow).removeClass('x-node-ctx');\r
+            this.ctxRow = null;\r
+        }\r
+    },\r
+\r
+    loadFeed : function(url) {\r
+        this.store.baseParams = {\r
+            feed: url\r
+        };\r
+        this.store.load();\r
+    },\r
+\r
+    togglePreview : function(show){\r
+        this.view.showPreview = show;\r
+        this.view.refresh();\r
+    },\r
+\r
+    // within this function "this" is actually the GridView\r
+    applyRowClass: function(record, rowIndex, p, ds) {\r
+        if (this.showPreview) {\r
+            var xf = Ext.util.Format;\r
+            p.body = '<p>' + xf.ellipsis(xf.stripTags(record.data.description), 200) + '</p>';\r
+            return 'x-grid3-row-expanded';\r
+        }\r
+        return 'x-grid3-row-collapsed';\r
+    },\r
+\r
+    formatDate : function(date) {\r
+        if (!date) {\r
+            return '';\r
+        }\r
+        var now = new Date();\r
+        var d = now.clearTime(true);\r
+        var notime = date.clearTime(true).getTime();\r
+        if (notime == d.getTime()) {\r
+            return 'Today ' + date.dateFormat('g:i a');\r
+        }\r
+        d = d.add('d', -6);\r
+        if (d.getTime() <= notime) {\r
+            return date.dateFormat('D g:i a');\r
+        }\r
+        return date.dateFormat('n/j g:i a');\r
+    },\r
+\r
+    formatTitle: function(value, p, record) {\r
+        return String.format(\r
+                '<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',\r
+                value, record.data.author, record.id, record.data.forumid\r
+                );\r
+    }\r
+});\r
+\r
+Ext.reg('appfeedgrid', FeedGrid);
\ No newline at end of file