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