examples/feed-viewer/viewer/FeedGrid.js

   1 Ext.define('FeedViewer.FeedGrid', {
   2     extend: 'Ext.grid.Panel',
   3
   4     alias: 'widget.feedgrid',
   5
   6     initComponent: function(){
   7         this.addEvents(
   8             /**
   9              * @event rowdblclick
  10              * Fires when a row is double clicked
  11              * @param {FeedViewer.FeedGrid} this
  12              * @param {Ext.data.Model} model
  13              */
  14             'rowdblclick',
  15             /**
  16              * @event select
  17              * Fires when a grid row is selected
  18              * @param {FeedViewer.FeedGrid} this
  19              * @param {Ext.data.Model} model
  20              */
  21             'select'
  22         );
  23
  24         Ext.apply(this, {
  25             cls: 'feed-grid',
  26             store: Ext.create('Ext.data.Store', {
  27                 model: 'FeedItem',
  28                 sortInfo: {
  29                     property: 'pubDate',
  30                     direction: 'DESC'
  31                 },
  32                 proxy: {
  33                     type: 'ajax',
  34                     url: 'feed-proxy.php',
  35                     reader: {
  36                         type: 'xml',
  37                         record: 'item'
  38                     }
  39                 },
  40                 listeners: {
  41                     load: this.onLoad,
  42                     scope: this
  43                 }
  44             }),
  45             viewConfig: {
  46                 itemId: 'view',
  47                 plugins: [{
  48                     pluginId: 'preview',
  49                     ptype: 'preview',
  50                     bodyField: 'description',
  51                     expanded: true
  52                 }],
  53                 listeners: {
  54                     scope: this,
  55                     itemdblclick: this.onRowDblClick
  56                 }
  57             },
  58             columns: [{
  59                 text: 'Title',
  60                 dataIndex: 'title',
  61                 flex: 1,
  62                 renderer: this.formatTitle
  63             }, {
  64                 text: 'Author',
  65                 dataIndex: 'author',
  66                 hidden: true,
  67                 width: 200
  68
  69             }, {
  70                 text: 'Date',
  71                 dataIndex: 'pubDate',
  72                 renderer: this.formatDate,
  73                 width: 200
  74             }]
  75         });
  76         this.callParent(arguments);
  77         this.on('selectionchange', this.onSelect, this);
  78     },
  79
  80         /**
  81      * Reacts to a double click
  82      * @private
  83      * @param {Object} view The view
  84      * @param {Object} index The row index
  85      */
  86     onRowDblClick: function(view, record, item, index, e) {
  87         this.fireEvent('rowdblclick', this, this.store.getAt(index));
  88     },
  89
  90
  91     /**
  92      * React to a grid item being selected
  93      * @private
  94      * @param {Ext.model.Selection} model The selection model
  95      * @param {Array} selections An array of selections
  96      */
  97     onSelect: function(model, selections){
  98         var selected = selections[0];
  99         if (selected) {
 100             this.fireEvent('select', this, selected);
 101         }
 102     },
 103
 104     /**
 105      * Listens for the store loading
 106      * @private
 107      */
 108     onLoad: function(){
 109         this.getSelectionModel().select(0);
 110     },
 111
 112     /**
 113      * Instructs the grid to load a new feed
 114      * @param {String} url The url to load
 115      */
 116     loadFeed: function(url){
 117         var store = this.store;
 118         store.getProxy().extraParams.feed = url;
 119         store.load();
 120     },
 121
 122     /**
 123      * Title renderer
 124      * @private
 125      */
 126     formatTitle: function(value, p, record){
 127         return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('author') || "Unknown");
 128     },
 129
 130     /**
 131      * Date renderer
 132      * @private
 133      */
 134     formatDate: function(date){
 135         if (!date) {
 136             return '';
 137         }
 138
 139         var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();
 140
 141         if (notime === d.getTime()) {
 142             return 'Today ' + Ext.Date.format(date, 'g:i a');
 143         }
 144
 145         d = Ext.Date.add(d, 'd', -6);
 146         if (d.getTime() <= notime) {
 147             return Ext.Date.format(date, 'D g:i a');
 148         }
 149         return Ext.Date.format(date, 'Y/m/d g:i a');
 150     }
 151 });