examples/forum/classes/TopicGrid.js

   1 Ext.define('ForumBrowser.TopicGrid', {
   2
   3     extend: 'Ext.grid.Panel',
   4
   5     alias: 'widget.topicgrid',
   6
   7     initComponent: function(){
   8         var store = Ext.create('Ext.data.Store', {
   9             model: 'ForumBrowser.Topic',
  10             remoteSort: true,
  11             sorters: [{
  12                 property: 'lastpost',
  13                 direction: 'DESC'
  14             }],
  15             proxy: {
  16                 simpleSortMode: true,
  17                 type: 'jsonp',
  18                 url: 'http://sencha.com/forum/topics-browse-remote.php',
  19                 reader: {
  20                     type: 'json',
  21                     root: 'topics',
  22                     totalProperty: 'totalCount'
  23                 }
  24             }
  25         });
  26
  27         Ext.apply(this, {
  28             store: store,
  29             viewConfig: {
  30                 plugins: [{
  31                     pluginId: 'preview',
  32                     ptype: 'preview',
  33                     bodyField: 'excerpt',
  34                     expanded: true
  35                 }]
  36             },
  37             selModel: Ext.create('Ext.selection.RowModel', {
  38                 mode: 'SINGLE',
  39                 listeners: {
  40                     scope: this,
  41                     select: this.onSelect
  42                 }
  43             }),
  44             columns: [
  45             {
  46                 header: 'Topic',
  47                 dataIndex: 'title',
  48                 flex: 1,
  49                 renderer: function(value, o, record) {
  50                      return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',
  51                          value, record.get('author'));
  52                 }
  53             }, {
  54                 header: 'Author',
  55                 dataIndex: 'author',
  56                 width: 100
  57                 //hidden: true
  58             }, {
  59                 header: 'Replies',
  60                 dataIndex: 'replycount',
  61                 width: 70,
  62                 align: 'right'
  63             }, {
  64                 header: 'Last Post',
  65                 dataIndex: 'lastpost',
  66                 width: 150,
  67                 renderer: function(value, o, rec){
  68                     return Ext.String.format('<span class="post-date">{0}</span><br/>by {1}', Ext.Date.format(value, 'M j, Y, g:i a'), rec.get('lastposter'));
  69                 }
  70             }
  71             ],
  72             dockedItems: [{
  73                 xtype: 'toolbar',
  74                 cls: 'x-docked-noborder-top',
  75                 items: [{
  76                     text: 'New Topic',
  77                     iconCls: 'icon-new-topic',
  78                     handler: function(){
  79                         alert('Not implemented');
  80                     }
  81                 }, '-', {
  82                     text: 'Preview Pane',
  83                     iconCls: 'icon-preview',
  84                     enableToggle: true,
  85                     pressed: true,
  86                     scope: this,
  87                     toggleHandler: this.onPreviewChange
  88                 }, {
  89                     text: 'Summary',
  90                     iconCls: 'icon-summary',
  91                     enableToggle: true,
  92                     pressed: true,
  93                     scope: this,
  94                     toggleHandler: this.onSummaryChange
  95                 }]
  96             }, {
  97                 dock: 'bottom',
  98                 xtype: 'pagingtoolbar',
  99                 store: store,
 100                 displayInfo: true,
 101                 displayMsg: 'Displaying topics {0} - {1} of {2}',
 102                 emptyMsg: 'No topics to display'
 103             }]
 104         });
 105         this.callParent();
 106     },
 107
 108     onSelect: function(selModel, rec){
 109         this.ownerCt.onSelect(rec);
 110     },
 111
 112     loadForum: function(id){
 113         var store = this.store;
 114         store.getProxy().extraParams.forumId = id;
 115         store.loadPage(1);
 116     },
 117
 118     onPreviewChange: function(btn, pressed){
 119         this.ownerCt.togglePreview(pressed);
 120     },
 121
 122     onSummaryChange: function(btn, pressed){
 123         this.getView().getPlugin('preview').toggleExpanded(pressed);
 124     }
 125 });