examples/feed-viewer/viewer/FeedGrid.js

   1 /*
   2
   3 This file is part of Ext JS 4
   4
   5 Copyright (c) 2011 Sencha Inc
   6
   7 Contact:  http://www.sencha.com/contact
   8
   9 GNU General Public License Usage
  10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  11
  12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  13
  14 */
  15 Ext.define('FeedViewer.FeedGrid', {
  16     extend: 'Ext.grid.Panel',
  17
  18     alias: 'widget.feedgrid',
  19
  20     initComponent: function(){
  21         this.addEvents(
  22             /**
  23              * @event rowdblclick
  24              * Fires when a row is double clicked
  25              * @param {FeedViewer.FeedGrid} this
  26              * @param {Ext.data.Model} model
  27              */
  28             'rowdblclick',
  29             /**
  30              * @event select
  31              * Fires when a grid row is selected
  32              * @param {FeedViewer.FeedGrid} this
  33              * @param {Ext.data.Model} model
  34              */
  35             'select'
  36         );
  37
  38         Ext.apply(this, {
  39             cls: 'feed-grid',
  40             store: Ext.create('Ext.data.Store', {
  41                 model: 'FeedItem',
  42                 sortInfo: {
  43                     property: 'pubDate',
  44                     direction: 'DESC'
  45                 },
  46                 proxy: {
  47                     type: 'ajax',
  48                     url: 'feed-proxy.php',
  49                     reader: {
  50                         type: 'xml',
  51                         record: 'item'
  52                     }
  53                 },
  54                 listeners: {
  55                     load: this.onLoad,
  56                     scope: this
  57                 }
  58             }),
  59             viewConfig: {
  60                 itemId: 'view',
  61                 plugins: [{
  62                     pluginId: 'preview',
  63                     ptype: 'preview',
  64                     bodyField: 'description',
  65                     expanded: true
  66                 }],
  67                 listeners: {
  68                     scope: this,
  69                     itemdblclick: this.onRowDblClick
  70                 }
  71             },
  72             columns: [{
  73                 text: 'Title',
  74                 dataIndex: 'title',
  75                 flex: 1,
  76                 renderer: this.formatTitle
  77             }, {
  78                 text: 'Author',
  79                 dataIndex: 'author',
  80                 hidden: true,
  81                 width: 200
  82
  83             }, {
  84                 text: 'Date',
  85                 dataIndex: 'pubDate',
  86                 renderer: this.formatDate,
  87                 width: 200
  88             }]
  89         });
  90         this.callParent(arguments);
  91         this.on('selectionchange', this.onSelect, this);
  92     },
  93
  94         /**
  95      * Reacts to a double click
  96      * @private
  97      * @param {Object} view The view
  98      * @param {Object} index The row index
  99      */
 100     onRowDblClick: function(view, record, item, index, e) {
 101         this.fireEvent('rowdblclick', this, this.store.getAt(index));
 102     },
 103
 104
 105     /**
 106      * React to a grid item being selected
 107      * @private
 108      * @param {Ext.model.Selection} model The selection model
 109      * @param {Array} selections An array of selections
 110      */
 111     onSelect: function(model, selections){
 112         var selected = selections[0];
 113         if (selected) {
 114             this.fireEvent('select', this, selected);
 115         }
 116     },
 117
 118     /**
 119      * Listens for the store loading
 120      * @private
 121      */
 122     onLoad: function(){
 123         this.getSelectionModel().select(0);
 124     },
 125
 126     /**
 127      * Instructs the grid to load a new feed
 128      * @param {String} url The url to load
 129      */
 130     loadFeed: function(url){
 131         var store = this.store;
 132         store.getProxy().extraParams.feed = url;
 133         store.load();
 134     },
 135
 136     /**
 137      * Title renderer
 138      * @private
 139      */
 140     formatTitle: function(value, p, record){
 141         return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('author') || "Unknown");
 142     },
 143
 144     /**
 145      * Date renderer
 146      * @private
 147      */
 148     formatDate: function(date){
 149         if (!date) {
 150             return '';
 151         }
 152
 153         var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();
 154
 155         if (notime === d.getTime()) {
 156             return 'Today ' + Ext.Date.format(date, 'g:i a');
 157         }
 158
 159         d = Ext.Date.add(d, 'd', -6);
 160         if (d.getTime() <= notime) {
 161             return Ext.Date.format(date, 'D g:i a');
 162         }
 163         return Ext.Date.format(date, 'Y/m/d g:i a');
 164     }
 165 });
 166