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