examples/grid/infinite-scroll.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.grid.PagingScroller'
  23 ]);
  24
  25 Ext.onReady(function(){
  26     Ext.define('ForumThread', {
  27         extend: 'Ext.data.Model',
  28         fields: [
  29             'title', 'forumtitle', 'forumid', 'author',
  30             {name: 'replycount', type: 'int'},
  31             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
  32             'lastposter', 'excerpt', 'threadid'
  33         ],
  34         idProperty: 'threadid'
  35     });
  36
  37     // create the Data Store
  38     var store = Ext.create('Ext.data.Store', {
  39         id: 'store',
  40         pageSize: 200,
  41         model: 'ForumThread',
  42         remoteSort: true,
  43         // allow the grid to interact with the paging scroller by buffering
  44         buffered: true,
  45         proxy: {
  46             // load using script tags for cross domain, if the data in on the same domain as
  47             // this page, an HttpProxy would be better
  48             type: 'jsonp',
  49             url: 'http://www.sencha.com/forum/remote_topics/index.php',
  50             extraParams: {
  51                 total: 50000
  52             },
  53             reader: {
  54                 root: 'topics',
  55                 totalProperty: 'totalCount'
  56             },
  57             // sends single sort as multi parameter
  58             simpleSortMode: true
  59         },
  60         sorters: [{
  61             property: 'lastpost',
  62             direction: 'DESC'
  63         }]
  64     });
  65
  66     function renderTopic(value, p, record) {
  67         return Ext.String.format(
  68             '<a href="http://sencha.com/forum/showthread.php?t={2}" target="_blank">{0}</a>',
  69             value,
  70             record.data.forumtitle,
  71             record.getId(),
  72             record.data.forumid
  73         );
  74     }
  75
  76
  77     var grid = Ext.create('Ext.grid.Panel', {
  78         width: 700,
  79         height: 500,
  80         title: 'ExtJS.com - Browse Forums',
  81         store: store,
  82         verticalScrollerType: 'paginggridscroller',
  83         loadMask: true,
  84         disableSelection: true,
  85         invalidateScrollerOnRefresh: false,
  86         viewConfig: {
  87             trackOver: false
  88         },
  89         // grid columns
  90         columns:[{
  91             xtype: 'rownumberer',
  92             width: 50,
  93             sortable: false
  94         },{
  95             // id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
  96             // TODO: This poses an issue in subclasses of Grid now because Headers are now Components
  97             // therefore the id will be registered in the ComponentManager and conflict. Need a way to
  98             // add additional CSS classes to the rendered cells.
  99             id: 'topic',
 100             text: "Topic",
 101             dataIndex: 'title',
 102             flex: 1,
 103             renderer: renderTopic,
 104             sortable: false
 105         },{
 106             text: "Author",
 107             dataIndex: 'author',
 108             width: 100,
 109             hidden: true,
 110             sortable: true
 111         },{
 112             text: "Replies",
 113             dataIndex: 'replycount',
 114             align: 'center',
 115             width: 70,
 116             sortable: false
 117         },{
 118             id: 'last',
 119             text: "Last Post",
 120             dataIndex: 'lastpost',
 121             width: 130,
 122             renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
 123             sortable: true
 124         }],
 125         renderTo: Ext.getBody()
 126     });
 127
 128     // trigger the data store load
 129     store.guaranteeRange(0, 199);
 130 });
 131
 132
 133