examples/key-feed-viewer/FeedGrid.js

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