examples/feed-viewer/FeedGrid.js

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