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