examples/grid/paging.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4 Ext.require([
   5     'Ext.grid.*',
   6     'Ext.data.*',
   7     'Ext.util.*',
   8     'Ext.toolbar.Paging',
   9     'Ext.ux.PreviewPlugin',
  10     'Ext.ModelManager',
  11     'Ext.tip.QuickTipManager'
  12 ]);
  13
  14
  15
  16 Ext.onReady(function(){
  17     Ext.tip.QuickTipManager.init();
  18
  19     Ext.define('ForumThread', {
  20         extend: 'Ext.data.Model',
  21         fields: [
  22             'title', 'forumtitle', 'forumid', 'author',
  23             {name: 'replycount', type: 'int'},
  24             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
  25             'lastposter', 'excerpt', 'threadid'
  26         ],
  27         idProperty: 'threadid'
  28     });
  29
  30     // create the Data Store
  31     var store = Ext.create('Ext.data.Store', {
  32         pageSize: 50,
  33         model: 'ForumThread',
  34         remoteSort: true,
  35         proxy: {
  36             // load using script tags for cross domain, if the data in on the same domain as
  37             // this page, an HttpProxy would be better
  38             type: 'jsonp',
  39             url: 'http://www.sencha.com/forum/topics-browse-remote.php',
  40             reader: {
  41                 root: 'topics',
  42                 totalProperty: 'totalCount'
  43             },
  44             // sends single sort as multi parameter
  45             simpleSortMode: true
  46         },
  47         sorters: [{
  48             property: 'lastpost',
  49             direction: 'DESC'
  50         }]
  51     });
  52
  53     // pluggable renders
  54     function renderTopic(value, p, record) {
  55         return Ext.String.format(
  56             '<b><a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://sencha.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
  57             value,
  58             record.data.forumtitle,
  59             record.getId(),
  60             record.data.forumid
  61         );
  62     }
  63
  64     function renderLast(value, p, r) {
  65         return Ext.String.format('{0}<br/>by {1}', Ext.Date.dateFormat(value, 'M j, Y, g:i a'), r.data['lastposter']);
  66     }
  67
  68
  69     var pluginExpanded = true;
  70     var grid = Ext.create('Ext.grid.Panel', {
  71         width: 700,
  72         height: 500,
  73         title: 'ExtJS.com - Browse Forums',
  74         store: store,
  75         disableSelection: true,
  76         loadMask: true,
  77         viewConfig: {
  78             id: 'gv',
  79             trackOver: false,
  80             stripeRows: false,
  81             plugins: [{
  82                 ptype: 'preview',
  83                 bodyField: 'excerpt',
  84                 expanded: true,
  85                 pluginId: 'preview'
  86             }]
  87         },
  88         // grid columns
  89         columns:[{
  90             // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
  91             // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
  92             // therefore the id will be registered in the ComponentManager and conflict. Need a way to
  93             // add additional CSS classes to the rendered cells.
  94             id: 'topic',
  95             text: "Topic",
  96             dataIndex: 'title',
  97             flex: 1,
  98             renderer: renderTopic,
  99             sortable: false
 100         },{
 101             text: "Author",
 102             dataIndex: 'author',
 103             width: 100,
 104             hidden: true,
 105             sortable: true
 106         },{
 107             text: "Replies",
 108             dataIndex: 'replycount',
 109             width: 70,
 110             align: 'right',
 111             sortable: true
 112         },{
 113             id: 'last',
 114             text: "Last Post",
 115             dataIndex: 'lastpost',
 116             width: 150,
 117             renderer: renderLast,
 118             sortable: true
 119         }],
 120         // paging bar on the bottom
 121         bbar: Ext.create('Ext.PagingToolbar', {
 122             store: store,
 123             displayInfo: true,
 124             displayMsg: 'Displaying topics {0} - {1} of {2}',
 125             emptyMsg: "No topics to display",
 126             items:[
 127                 '-', {
 128                 text: 'Show Preview',
 129                 pressed: pluginExpanded,
 130                 enableToggle: true,
 131                 toggleHandler: function(btn, pressed) {
 132                     var preview = Ext.getCmp('gv').getPlugin('preview');
 133                     preview.toggleExpanded(pressed);
 134                 }
 135             }]
 136         }),
 137         renderTo: 'topic-grid'
 138     });
 139
 140     // trigger the data store load
 141     store.loadPage(1);
 142 });