extjs/build/examples/classic/feed-viewer/viewer/FeedGrid.js

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