examples/key-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
  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             viewConfig: {
  79                 itemId: 'view',
  80                 plugins: [{
  81                     pluginId: 'preview',
  82                     ptype: 'preview',
  83                     bodyField: 'description',
  84                     expanded: true
  85                 }],
  86                 listeners: {
  87                     scope: this,
  88                     dblclick: this.onRowDblClick,
  89                     afterrender: this.onViewRender
  90                 }
  91             }
  92         });
  93         this.callParent(arguments);
  94         this.on('selectionchange', this.onSelect, this);
  95     },
  96
  97     // private
  98     onViewRender: function() {
  99         var me = this;
 100         me.keyNav = Ext.create('Ext.util.KeyNav', me.items.getAt(0).el, {
 101             enter: me.onEnterKey,
 102             scope: me
 103         });
 104     },
 105
 106     onDestroy: function() {
 107         var me = this;
 108         Ext.destroy(me.keyNav);
 109         delete me.keyNav;
 110         me.callParent(arguments);
 111     },
 112
 113     onEnterKey: function(e) {
 114         var me = this,
 115             view = me.view,
 116             idx = view.indexOf(view.getSelectedNodes()[0]);
 117
 118         me.onRowDblClick(view, idx);
 119     },
 120
 121     /**
 122      * Reacts to a double click
 123      * @private
 124      * @param {Object} view The view
 125      * @param {Object} index The row index
 126      */
 127     onRowDblClick: function(view, index){
 128         this.fireEvent('rowdblclick', this, this.store.getAt(index));
 129     },
 130
 131
 132     /**
 133      * React to a grid item being selected
 134      * @private
 135      * @param {Ext.model.Selection} model The selection model
 136      * @param {Array} selections An array of selections
 137      */
 138     onSelect: function(model, selections){
 139         var selected = selections[0];
 140         if (selected) {
 141             this.fireEvent('select', this, selected);
 142         }
 143     },
 144
 145     /**
 146      * Listens for the store loading
 147      * @private
 148      */
 149     onLoad: function(){
 150         this.getSelectionModel().select(0);
 151     },
 152
 153     /**
 154      * Instructs the grid to load a new feed
 155      * @param {String} url The url to load
 156      */
 157     loadFeed: function(url){
 158         var store = this.store;
 159         store.getProxy().extraParams.feed = url;
 160         store.load();
 161     },
 162
 163     /**
 164      * Title renderer
 165      * @private
 166      */
 167     formatTitle: function(value, p, record){
 168         return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('author'));
 169     },
 170
 171     /**
 172      * Date renderer
 173      * @private
 174      */
 175     formatDate: function(date){
 176         if (!date) {
 177             return '';
 178         }
 179
 180         var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();
 181
 182         if (notime === d.getTime()) {
 183             return 'Today ' + Ext.Date.format(date, 'g:i a');
 184         }
 185
 186         d = Ext.Date.add(d, 'd', -6);
 187         if (d.getTime() <= notime) {
 188             return Ext.Date.format(date, 'D g:i a');
 189         }
 190         return Ext.Date.format(date, 'Y/m/d g:i a');
 191     }
 192 });
 193