examples/feed-viewer/FeedGrid.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 FeedGrid = function(viewer, config) {\r
  10     this.viewer = viewer;\r
  11     Ext.apply(this, config);\r
  12 \r
  13     this.store = new Ext.data.Store({\r
  14         proxy: new Ext.data.HttpProxy({\r
  15             url: 'feed-proxy.php'\r
  16         }),\r
  17 \r
  18         reader: new Ext.data.XmlReader(\r
  19             {record: 'item'},\r
  20             ['title', 'author', {name:'pubDate', type:'date'}, 'link', 'description', 'content']\r
  21         )\r
  22     });\r
  23     this.store.setDefaultSort('pubDate', "DESC");\r
  24 \r
  25     this.columns = [{\r
  26         id: 'title',\r
  27         header: "Title",\r
  28         dataIndex: 'title',\r
  29         sortable:true,\r
  30         width: 420,\r
  31         renderer: this.formatTitle\r
  32       },{\r
  33         header: "Author",\r
  34         dataIndex: 'author',\r
  35         width: 100,\r
  36         hidden: true,\r
  37         sortable:true\r
  38       },{\r
  39         id: 'last',\r
  40         header: "Date",\r
  41         dataIndex: 'pubDate',\r
  42         width: 150,\r
  43         renderer:  this.formatDate,\r
  44         sortable:true\r
  45     }];\r
  46 \r
  47     FeedGrid.superclass.constructor.call(this, {\r
  48         region: 'center',\r
  49         id: 'topic-grid',\r
  50         loadMask: {msg:'Loading Feed...'},\r
  51 \r
  52         sm: new Ext.grid.RowSelectionModel({\r
  53             singleSelect:true\r
  54         }),\r
  55 \r
  56         viewConfig: {\r
  57             forceFit:true,\r
  58             enableRowBody:true,\r
  59             showPreview:true,\r
  60             getRowClass : this.applyRowClass\r
  61         }\r
  62     });\r
  63 \r
  64     this.on('rowcontextmenu', this.onContextClick, this);\r
  65 };\r
  66 \r
  67 Ext.extend(FeedGrid, Ext.grid.GridPanel, {\r
  68 \r
  69     onContextClick : function(grid, index, e){\r
  70         if(!this.menu){ // create context menu on first right click\r
  71             this.menu = new Ext.menu.Menu({\r
  72                 id:'grid-ctx',\r
  73                 items: [{\r
  74                     text: 'View in new tab',\r
  75                     iconCls: 'new-tab',\r
  76                     scope:this,\r
  77                     handler: function(){\r
  78                         this.viewer.openTab(this.ctxRecord);\r
  79                     }\r
  80                 },{\r
  81                     iconCls: 'new-win',\r
  82                     text: 'Go to Post',\r
  83                     scope:this,\r
  84                     handler: function(){\r
  85                         window.open(this.ctxRecord.data.link);\r
  86                     }\r
  87                 },'-',{\r
  88                     iconCls: 'refresh-icon',\r
  89                     text:'Refresh',\r
  90                     scope:this,\r
  91                     handler: function(){\r
  92                         this.ctxRow = null;\r
  93                         this.store.reload();\r
  94                     }\r
  95                 }]\r
  96             });\r
  97             this.menu.on('hide', this.onContextHide, this);\r
  98         }\r
  99         e.stopEvent();\r
 100         if(this.ctxRow){\r
 101             Ext.fly(this.ctxRow).removeClass('x-node-ctx');\r
 102             this.ctxRow = null;\r
 103         }\r
 104         this.ctxRow = this.view.getRow(index);\r
 105         this.ctxRecord = this.store.getAt(index);\r
 106         Ext.fly(this.ctxRow).addClass('x-node-ctx');\r
 107         this.menu.showAt(e.getXY());\r
 108     },\r
 109 \r
 110     onContextHide : function(){\r
 111         if(this.ctxRow){\r
 112             Ext.fly(this.ctxRow).removeClass('x-node-ctx');\r
 113             this.ctxRow = null;\r
 114         }\r
 115     },\r
 116 \r
 117     loadFeed : function(url) {\r
 118         this.store.baseParams = {\r
 119             feed: url\r
 120         };\r
 121         this.store.load();\r
 122     },\r
 123 \r
 124     togglePreview : function(show){\r
 125         this.view.showPreview = show;\r
 126         this.view.refresh();\r
 127     },\r
 128 \r
 129     // within this function "this" is actually the GridView\r
 130     applyRowClass: function(record, rowIndex, p, ds) {\r
 131         if (this.showPreview) {\r
 132             var xf = Ext.util.Format;\r
 133             p.body = '<p>' + xf.ellipsis(xf.stripTags(record.data.description), 200) + '</p>';\r
 134             return 'x-grid3-row-expanded';\r
 135         }\r
 136         return 'x-grid3-row-collapsed';\r
 137     },\r
 138 \r
 139     formatDate : function(date) {\r
 140         if (!date) {\r
 141             return '';\r
 142         }\r
 143         var now = new Date();\r
 144         var d = now.clearTime(true);\r
 145         var notime = date.clearTime(true).getTime();\r
 146         if (notime == d.getTime()) {\r
 147             return 'Today ' + date.dateFormat('g:i a');\r
 148         }\r
 149         d = d.add('d', -6);\r
 150         if (d.getTime() <= notime) {\r
 151             return date.dateFormat('D g:i a');\r
 152         }\r
 153         return date.dateFormat('n/j g:i a');\r
 154     },\r
 155 \r
 156     formatTitle: function(value, p, record) {\r
 157         return String.format(\r
 158                 '<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',\r
 159                 value, record.data.author, record.id, record.data.forumid\r
 160                 );\r
 161     }\r
 162 });