FeedGrid.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. Ext.define('FeedViewer.FeedGrid', {
  2. extend: 'Ext.grid.Panel',
  3. alias: 'widget.feedgrid',
  4. initComponent: function(){
  5. this.addEvents(
  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. 'rowdblclick',
  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. 'select'
  20. );
  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. viewConfig: {
  47. itemId: 'view',
  48. plugins: [{
  49. pluginId: 'preview',
  50. ptype: 'preview',
  51. bodyField: 'description',
  52. expanded: true
  53. }],
  54. listeners: {
  55. scope: this,
  56. itemdblclick: this.onRowDblClick
  57. }
  58. },
  59. columns: [{
  60. text: 'Title',
  61. dataIndex: 'title',
  62. flex: 1,
  63. renderer: this.formatTitle
  64. }, {
  65. text: 'Author',
  66. dataIndex: 'author',
  67. hidden: true,
  68. width: 200
  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. * Reacts to a double click
  81. * @private
  82. * @param {Object} view The view
  83. * @param {Object} index The row index
  84. */
  85. onRowDblClick: function(view, record, item, index, e) {
  86. this.fireEvent('rowdblclick', this, this.store.getAt(index));
  87. },
  88. /**
  89. * React to a grid item being selected
  90. * @private
  91. * @param {Ext.model.Selection} model The selection model
  92. * @param {Array} selections An array of selections
  93. */
  94. onSelect: function(model, selections){
  95. var selected = selections[0];
  96. if (selected) {
  97. this.fireEvent('select', this, selected);
  98. }
  99. },
  100. /**
  101. * Listens for the store loading
  102. * @private
  103. */
  104. onLoad: function(store, records, success) {
  105. if (this.getStore().getCount()) {
  106. this.getSelectionModel().select(0);
  107. }
  108. },
  109. /**
  110. * Listen for proxy eerrors.
  111. */
  112. onProxyException: function(proxy, response, operation) {
  113. Ext.Msg.alert("Error with data from server", operation.error);
  114. this.view.el.update('');
  115. // Update the detail view with a dummy empty record
  116. this.fireEvent('select', this, {data:{}});
  117. },
  118. /**
  119. * Instructs the grid to load a new feed
  120. * @param {String} url The url to load
  121. */
  122. loadFeed: function(url){
  123. var store = this.store;
  124. store.getProxy().extraParams.feed = url;
  125. store.load();
  126. },
  127. /**
  128. * Title renderer
  129. * @private
  130. */
  131. formatTitle: function(value, p, record){
  132. return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>', value, record.get('author') || "Unknown");
  133. },
  134. /**
  135. * Date renderer
  136. * @private
  137. */
  138. formatDate: function(date){
  139. if (!date) {
  140. return '';
  141. }
  142. var now = new Date(), d = Ext.Date.clearTime(now, true), notime = Ext.Date.clearTime(date, true).getTime();
  143. if (notime === d.getTime()) {
  144. return 'Today ' + Ext.Date.format(date, 'g:i a');
  145. }
  146. d = Ext.Date.add(d, 'd', -6);
  147. if (d.getTime() <= notime) {
  148. return Ext.Date.format(date, 'D g:i a');
  149. }
  150. return Ext.Date.format(date, 'Y/m/d g:i a');
  151. }
  152. });